Tailwind Navbars

Discover 13 Tailwind Navbars available in Loopple

Navbar With Breadcrumb And Search

<div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
  <nav>
    <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
      <li class="text-sm leading-normal">
        <a class="opacity-50 text-slate-700" href="javascript:;">Pages</a>
      </li>
      <li class="text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:text-gray-600 before:content-['/']" aria-current="page">Tables</li>
    </ol>
    <h6 class="mb-0 font-bold capitalize">Tables</h6>
  </nav>
  <div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto">
    <div class="flex items-center md:ml-auto md:pr-4">
      <div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
        <span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
          <i class="fas fa-search" aria-hidden="true"></i>
        </span>
        <input type="text" class="pl-8.75 text-sm focus:shadow-soft-primary-outline ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow" placeholder="Type here...">
      </div>
    </div>
    <ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
      <li class="flex items-center">
        <a href="../pages/sign-in.html" class="block px-0 py-2 text-sm font-semibold transition-all ease-nav-brand text-slate-500">
          <i class="fa fa-user sm:mr-1" aria-hidden="true"></i>
          <span class="hidden sm:inline">Sign In</span>
        </a>
      </li>
      <li class="flex items-center pl-4 xl:hidden">
        <a href="javascript:;" class="block p-0 text-sm transition-all ease-nav-brand text-slate-500" sidenav-trigger="">
          <div class="w-4.5 overflow-hidden">
            <i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
            <i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
            <i class="ease-soft relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
          </div>
        </a>
      </li>
      <li class="flex items-center px-4">
        <a href="javascript:;" class="p-0 text-sm transition-all ease-nav-brand text-slate-500">
          <i fixed-plugin-button-nav="" class="cursor-pointer fa fa-cog" aria-hidden="true"></i>
        </a>
      </li>
      <li class="relative flex items-center pr-2">
        <p class="hidden transform-dropdown-show"></p>
        <a href="javascript:;" class="block p-0 text-sm transition-all ease-nav-brand text-slate-500" dropdown-trigger="" aria-expanded="false">
          <i class="cursor-pointer fa fa-bell" aria-hidden="true"></i>
        </a>
        <ul dropdown-menu="" class="text-sm transform-dropdown before:font-awesome before:leading-default before:duration-350 before:ease-soft lg:shadow-soft-3xl duration-250 min-w-44 before:sm:right-7.5 before:text-5.5 pointer-events-none absolute right-0 top-0 z-50 origin-top list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-2 before:left-auto before:top-0 before:z-50 before:inline-block before:font-normal before:text-white before:antialiased before:transition-all before:content-['\f0d8'] sm:-mr-6 lg:absolute lg:right-0 lg:left-auto lg:mt-2 lg:block lg:cursor-pointer">
          <li class="relative mb-2">
            <a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg bg-transparent px-4 duration-300 hover:bg-gray-200 hover:text-slate-700 lg:transition-colors" href="javascript:;">
              <div class="flex py-1">
                <div class="my-auto">
                  <img src="../assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-sm text-white h-9 w-9 max-w-none rounded-xl">
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-1 text-sm font-normal leading-normal">
                    <span class="font-semibold">New message</span> from Laur
                  </h6>
                  <p class="mb-0 text-xs leading-tight text-slate-400">
                    <i class="mr-1 fa fa-clock" aria-hidden="true"></i> 13 minutes ago
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li class="relative mb-2">
            <a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700" href="javascript:;">
              <div class="flex py-1">
                <div class="my-auto">
                  <img src="../assets/img/small-logos/logo-spotify.svg" class="inline-flex items-center justify-center mr-4 text-sm text-white bg-gradient-to-tl from-gray-900 to-slate-800 h-9 w-9 max-w-none rounded-xl">
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-1 text-sm font-normal leading-normal">
                    <span class="font-semibold">New album</span> by Travis Scott
                  </h6>
                  <p class="mb-0 text-xs leading-tight text-slate-400">
                    <i class="mr-1 fa fa-clock" aria-hidden="true"></i> 1 day
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li class="relative">
            <a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700" href="javascript:;">
              <div class="flex py-1">
                <div class="inline-flex items-center justify-center my-auto mr-4 text-sm text-white transition-all duration-200 ease-nav-brand bg-gradient-to-tl from-slate-600 to-slate-300 h-9 w-9 rounded-xl">
                  <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>credit-card</title>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                          <g transform="translate(453.000000, 454.000000)">
                            <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
                            <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-1 text-sm font-normal leading-normal">Payment successfully completed</h6>
                  <p class="mb-0 text-xs leading-tight text-slate-400">
                    <i class="mr-1 fa fa-clock" aria-hidden="true"></i> 2 days
                  </p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Navbar With Logo

Navbar Crypto

Double Navigation Bar

Navbar With Sign Up Button

Navbar With Logo And Authentication Buttons

<div class="container mx-auto draggable">
    <div class="relative flex items-center justify-between w-full px-2 bg-white py-9 group shrink-0">
      <div class="shrink-0">
        <img class="h-8" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"></img>
      </div>
      <div class="items-center justify-between hidden gap-12 text-sm font-medium md:flex text-grey-800">
        <a class="font-bold text-dark-grey-900 hover:text-dark-grey-700" href="javascript:void(0)">Product</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
      </div>
      <div class="items-center hidden gap-2 md:flex">
        <button class="box-content flex items-center px-4 py-2 text-sm font-bold border rounded-xl border-purple-blue-500 text-purple-blue-500 hover:bg-purple-blue-500 hover:text-white focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Log In</button>
        <button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-700 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Sign Up</button>
      </div>
      <button onclick="(() => { this.closest('.group').classList.toggle('open')})()" class="flex md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/>
        </svg>
      </button>
      <div class="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
        <a class="font-bold text-dark-grey-900 hover:text-dark-grey-700" href="javascript:void(0)">Product</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
        <a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
        <button class="box-content flex items-center px-4 py-2 text-sm font-bold border rounded-xl border-purple-blue-500 text-purple-blue-500 hover:bg-purple-blue-500 hover:text-white focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Log In</button>
        <button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-700 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Sign Up</button>
      </div>
    </div>
  </div>

Navbar With Logo And Search Input

Navbar With 2 Buttons And Logo

Navbar With Centered Logo

Navbar White Dot Notification