<div class="bg-gray-50">
    <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        <span class="block">Ready to dive in?</span>
        <span class="block text-indigo-600">Start your free trial today.</span>
      </h2>
      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
        <div class="inline-flex rounded-md shadow">
          <a
            href="#"
            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
            Get started
          </a>
        </div>
        <div class="ml-3 inline-flex rounded-md shadow">
          <a
            href="#"
            class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
            Learn more
          </a>
        </div>
      </div>
    </div>
  </div>

<div class="bg-gray-50">
<nav class="relative my-3 mb-3 flex flex-wrap items-center justify-between bg-indigo-500 px-2 pt-1">
<div class="container mx-auto flex flex-wrap items-center justify-between">
  <div class="static block w-auto justify-start">
    <a class="mr-4 inline-block whitespace-nowrap text-sm font-bold uppercase leading-relaxed text-white" href="#pablo"> Navbar </a>
  </div>
  <div class="flex items-center" id="example-navbar-warning">
    <ul class="ml-auto flex list-none flex-row">
      <li class="nav-item rounded-t-xl hover:bg-white">
        <a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-dashboard mr-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M4 4h6v8h-6z" />
            <path d="M4 16h6v4h-6z" />
            <path d="M14 12h6v8h-6z" />
            <path d="M14 4h6v4h-6z" />
          </svg>
          Dashbord
        </a>
      </li>
      <li class="nav-item rounded-t-xl hover:bg-white">
        <a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-rolodex mr-1" viewBox="0 0 16 16">
            <path d="M8 9.05a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
            <path d="M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1H1Zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1V2Z" />
          </svg>
          Address
        </a>
      </li>
      <li class="nav-item rounded-t-xl hover:bg-white">
        <a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-break mr-1" viewBox="0 0 16 16">
            <path d="M14 4.5V9h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v7H2V2a2 2 0 0 1 2-2h5.5L14 4.5zM13 12h1v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2h1v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2zM.5 10a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H.5z" />
          </svg>
          Components
        </a>
      </li>
      <li class="nav-item rounded-t-xl hover:bg-white">
        <a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar2-week mr-1" viewBox="0 0 16 16">
            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z" />
            <path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4zM11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
          </svg>
          Calender
        </a>
      </li>
      <li class="nav-item rounded-t-xl hover:bg-white">
        <a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-bar-graph-fill mr-1" viewBox="0 0 16 16">
            <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z" />
          </svg>
          Charts
        </a>
      </li>
    </ul>
  </div>
</div>
</nav>

<nav class="min-h-screen h-max bg-blue-500 opacity-80 text-white divide-y divide-blue-400">
<div class="px-5 py-3 w-full flex justify-between items-center">
  <div class="">
    <span class="">Homepage</span>
  </div>
  <button class="border-solid border-2 rounded py-1 px-2">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </button>
</div>
<div class="px-5 py-3 h-full divide-y divide-blue-400">
  <ul class="w-full pb-3">
      <li class="py-2 px-2 hover:bg-blue-600"><a href="#" class="">Menu Item 1</a></li>
      <li class="w-full py-2 divide-x divide-blue-300">
        <a href="#" class="flex p-2 hover:bg-blue-600">Menu Item 2</a>
        <ul class="ml-2">
          <li class="mt-2 ml-2.5 pl-5 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 1</a></li>
          <li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 2</a></li>
          <li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 3</a></li>
          <li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 4</a></li>
        </ul>
      </li>
  </ul>

  <div class="py-5 w-full divide-y divide-blue-400">
      <div class="pl-2 pb-5">
        <span href="#" class="">Current Buy Price:</span>
        <span class="">100</span>
      </div>

      <div class="pt-10 w-full flex justify-center">
        <button class="flex-grow border-t-2 border-l-2 border-b-2 rounded-l py-1 px-5">Sign in</button>
        <span class="border-solid border-2 rounded-full p-2 my-1 text-xs">OR</span>
        <button class="flex-grow border-t-2 border-r-2 border-b-2 rounded-r  py-1 px-5">Sign up</button>
      </div>
  </div>

</div>

</nav>