Guess, IRL where no navbars in website which has 20 pages. This would rather increase the memory power in memorizing all the URLs 🤪
<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>