Developer-Friendly Tailwind General Components

Pill Navigation Bar

<nav class="mx-auto w-full px-4 lg:max-w-screen-2xl lg:px-10" x-data="{ isOpen: true }">
  <div class="flex list-none items-center justify-between rounded-full border border-slate-700/40 bg-slate-700/20 p-4 font-sans font-medium">
    
    <div class="p-1">
      <a href="/" class="relative z-10 flex w-auto select-none items-center text-2xl font-extrabold leading-none text-black">jamstackers.</a>
    </div>

<ul class="hidden w-full items-center justify-end md:flex">
      <li>
        <a href="/" class="mx-2 cursor-pointer transition-colors duration-300 ease-in-out hover:text-white">Home</a>
      </li>
      <li>
        <a href="/about" class="mx-2 cursor-pointer transition-colors duration-300 ease-in-out hover:text-white">About</a>
      </li>
    </ul>

<form class="hidden items-center space-x-2 sm:flex">
      <input class="form-control rounded border border-gray-400 px-2 py-1" type="text" placeholder="Search" />
      <button class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700" type="submit">Go</button>
    </form>

<button @click="isOpen = !isOpen" class="rounded px-3 py-1 text-white hover:fill-slate-700 md:hidden" type="button">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" x-show="!isOpen" x-cloak class="h-6 w-6">
        <path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" />
      </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" x-show="isOpen" x-cloak class="h-6 w-6">
        <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
      </svg>
    </button>
  </div>
</nav>

<js-component src="general/pill_navigation_bar"></js-component>

Side Bar Menu

View

<div x-data="{ isOpen: true }" class="relative">
  
  <div class="fixed inset-y-0 left-0 z-20 w-64 transform bg-gray-800 text-white transition-transform duration-300" :class="{ '-translate-x-full': !isOpen, 'translate-x-0': isOpen }">
    <div class="flex items-center justify-between border-b border-gray-700 p-4">
      <span class="text-xl font-bold">Menu</span>
      <button @click="isOpen = false" class="text-gray-300 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-6 w-6">
          <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6 9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
        </svg>
      </button>
    </div>
    <ul class="space-y-2 p-4">
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">Home</a></li>
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">About</a></li>
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">Contact</a></li>
    </ul>
  </div>

<div x-show="isOpen" @click="isOpen = false" x-cloak class="fixed inset-0 z-10 bg-black bg-opacity-50"></div>
</div>

<js-component src="general/side_bar_menu"></js-component>

QuickLinks

View

<div class="bg-gray-50  w-full p-4">
  <div class="max-w-screen-xl w-full mx-auto flex justify-between items-center">
        <div class="flex justify-start items-center space-x-1 text-slate-500  ">
        <p>📞 Contact us on: </p>  <a href="tel:+314-159-2653" class="hover:text-blue-300 duration-300 transition-colors"> +314-159-2653</a>
        </div>
        <ul class="flex justify-end space-x-4">
            <li class="nav-item">
                <a class="nav-link active text-blue-500 hover:underline" href="index.html">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-blue-500 hover:underline" href="my_account.html">My Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-blue-500 hover:underline" href="#cart">Shopping Cart</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-blue-500 hover:underline" href="two-column.html">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-blue-500 hover:underline" href="contact.html">Contact</a>
            </li>
        </ul>
  </div>
</div>

<js-component src="general/quicklinks"></js-component>

Navigation with login button

View

<section class="relative w-full   text-gray-700 body-font" data-tails-scripts="//unpkg.com/alpinejs" {!! $attributes ?? '' !!}>
				<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
					<a href="/" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none text-black select-none">tailwindlists.</a>

<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
						<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none" data-rounded="rounded-md">
							<i class="fa-solid fa-circle-user mr-2"></i> Login/Register
						</a>

<span class="inline-flex rounded-md shadow-sm">
							<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-rounded="rounded-md" data-primary="blue-600">
								Post Listing
							</a>
						</span>
					</div>
				</div>
			</section>
			
		</header>

<js-component src="nav/login"></js-component>

Breadcrumb

View

<js-component src="nav/breadcrumb"></js-component>

Navigation Sidebar

View

<ul class="  p-3 mb-4 list-none bg-gray-200 rounded-none">
    <li class="  ">Categories</li>
</ul>

<div class=" ">
      <ul class="list-none space-y-2">
          <li>
              <a class="font-medium text-blue-600 hover:underline" href="category.html">Desktops (12)</a>
              <ul class="list-disc pl-5 space-y-1">
                  <li><a class="text-blue-600 hover:underline" href="listings.html">PC (11)</a></li>
                  <li><a class="text-blue-600 hover:underline font-bold" href="listings.html">Mac (1)</a></li>
              </ul>                            
          </li>
          <li>
              <a class="font-medium text-blue-600 hover:underline" href="category.html">Laptops &amp; Notebooks (5)</a>
              <ul class="list-disc pl-5 space-y-1">
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Macs (0)</a></li>
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Windows (0)</a></li>
              </ul>                            
          </li>
          <li>
              <a class="font-medium text-blue-600 hover:underline" href="category.html">Components (2)</a>
              <ul class="list-disc pl-5 space-y-1">
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Mice and Trackballs (0)</a></li>
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Monitors (2)</a></li>
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Printers (0)</a></li>
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Scanners (0)</a></li>
                  <li><a class="text-blue-600 hover:underline" href="listings.html">Web Cameras (0)</a></li>
              </ul>                            
          </li>
          <li><a class="font-medium text-blue-600 hover:underline" href="category.html">Tablets (1)</a></li>
          <li><a class="font-medium text-blue-600 hover:underline" href="category.html">Software (0)</a></li>
          <li><a class="font-medium text-blue-600 hover:underline" href="category.html">Phones &amp; PDAs (3)</a></li>
          <li><a class="font-medium text-blue-600 hover:underline" href="category.html">Cameras (2)</a></li>
      </ul>
  </div>
</div>

<js-component src="nav/sidebar"></js-component>

Menu Dropdown

View

<nav class="bg-gray-800 text-white mb-3 w-full">
    <div class="max-w-screen-xl w-full mx-auto mx-auto flex items-center justify-between py-4 pr-1">
        <div class="flex items-center">
            <button class="text-white focus:outline-none sm:hidden" @click="open = !open" aria-label="Toggle navigation">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
            <ul class="hidden sm:flex space-x-4 ml-4">
                <li><a href="listings.html" class="nav-link">Home</a></li>
                <li><a href="listings.html" class="nav-link">Smartphones</a></li>
                <li x-data="{ open: false }" class="relative">
                    <a href="#" @click="open = !open" class="nav-link flex items-center cursor-pointer">Laptops <i class="ml-1 fa-solid fa-angle-down text-xs"></i></a>
                    <div x-show="open" @click.away="open = false" class="z-50 absolute left-0 mt-5 -ml-2 w-40 bg-gray-800 text-white shadow-md">
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">PC</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Mac</a>
                    </div>
                </li>
                <li x-data="{ open: false }" class="relative">
                    <a href="#" @click="open = !open" class="nav-link flex items-center cursor-pointer">Components <i class="ml-1 fa-solid fa-angle-down  text-xs"></i></a>
                    <div x-show="open" @click.away="open = false" class="z-50 absolute left-0 mt-5 -ml-2 w-40 bg-gray-800 text-white shadow-md">
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Mice</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Monitors</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Printers</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Scanners</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Web cameras</a>
                    </div>
                </li>
                <li><a href="listings.html" class="nav-link">Tablets</a></li>
                <li x-data="{ open: false }" class="relative">
                    <a href="#" @click="open = !open" class="nav-link flex items-center cursor-pointer ">Software <i class="ml-1 fa-solid fa-angle-down  text-xs"></i></a>
                    <div x-show="open" @click.away="open = false" class="z-50 absolute left-0 mt-5 -ml-2 w-40 bg-gray-800 text-white shadow-md">
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Business &amp; Office</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Children's Fun &amp; Learning</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Digital Imaging</a>
                        <div class="border-t border-gray-700 my-2"></div>
                        <span class="block px-4 py-2 font-bold">PC Games</span>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Action &amp; Shooter</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Adventure</a>
                        <a href="listings.html" class="block px-4 py-4 hover:bg-gray-700">Fighting</a>
                    </div>
                </li>
            </ul>
        </div>
        <form class="flex items-center space-x-2">
            <input class="form-control px-2 py-1 border border-gray-400 rounded" type="text" placeholder="Search">
            <button class="bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700" type="submit">Go</button>
        </form>
    </div>
</nav>

<js-component src="nav/menu-dropdown"></js-component>

Navs

View

<js-component src="general/navs"></js-component>

Pagination

View

<js-component src="general/pagination"></js-component>

Vertical Navbar

View

<js-component src="general/vertical_navbar"></js-component>

Navbar

View

<nav class="w-full bg-gray-200 p-4 flex justify-between items-center">
    <div class="flex items-center gap-4">
        <img src="https://placehold.co/40x40" alt="Logo" class="w-10 h-10">
        <span class="font-bold text-xl">BrandName</span>
    </div>
    <div class="flex gap-4">
        <a href="#" class="text-black hover:underline">Home</a>
        <a href="#" class="text-black hover:underline">About</a>
        <a href="#" class="text-black hover:underline">Services</a>
        <a href="#" class="text-black hover:underline">Contact</a>
    </div>
    <div x-data="{ open: false }" class="sm:hidden">
        <button @click="open = !open" class="text-black">
            <svg x-show="!open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
            <svg x-show="open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>
    <div x-show="open" class="sm:hidden flex flex-col gap-4 mt-2">
        <a href="#" class="text-black hover:underline">Home</a>
        <a href="#" class="text-black hover:underline">About</a>
        <a href="#" class="text-black hover:underline">Services</a>
        <a href="#" class="text-black hover:underline">Contact</a>
    </div>
</nav>

<js-component src="general/navbar"></js-component>