Search Components

Navigation

Components that help users navigate through the website and find content

Retro Navigation Bar

A responsive, high-contrast retro/vintage navigation bar suitable for food/restaurant websites, featuring 80s/90s aesthetics and dark mode support.

Open Preview

                <nav class="bg-red-600 dark:bg-gray-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono text-white p-4 shadow-xl z-50 relative">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 dark:text-yellow-400 leading-none tracking-tight transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
      <span class="block">BURGER</span>
      <span class="block -mt-3 sm:-mt-4 lg:-mt-6 ml-4 text-white dark:text-gray-200 text-3xl sm:text-4xl lg:text-5xl">BLAST!</span>
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-white focus:outline-none focus:ring-4 focus:ring-yellow-400 dark:focus:ring-yellow-600 p-2 rounded-lg bg-yellow-400 dark:bg-yellow-600 border-2 border-white transform hover:scale-105 transition-transform duration-200 ease-in-out">
        <svg class="w-8 h-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 text-2xl lg:text-3xl font-bold uppercase tracking-wider">
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        HOME
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        MENU
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        LOCATIONS
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out flex items-center space-x-2">
        CART
        <svg class="w-7 h-7" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        <span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full absolute -top-2 -right-3 border-2 border-white dark:border-gray-900">3</span>
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden, shown with JS) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-red-600 dark:bg-gray-900 border-t-4 border-yellow-400 dark:border-yellow-600 pb-4 shadow-xl z-40">
    <div class="flex flex-col items-center space-y-4 text-2xl font-bold uppercase py-4">
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">HOME</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">MENU</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">LOCATIONS</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out flex items-center justify-center space-x-2">
        <span>CART</span>
        <svg class="w-7 h-7" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        <span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full">3</span>
      </a>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function () {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

Bauhaus Weather Nav

A responsive navigation component for a weather and climate application, featuring a Bauhaus-inspired design with geometric forms, muted colors, and full dark mode support.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-900 border-b-4 border-yellow-500 dark:border-blue-700 p-4 transition-colors duration-300">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <div class="w-8 h-8 bg-blue-600 dark:bg-red-500 transform rotate-45"></div>
      <a href="#" class="text-gray-800 dark:text-gray-100 text-xl font-bold uppercase tracking-wider block">CLIMA</a>
    </div>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500" aria-label="Toggle navigation menu" onclick="this.nextElementSibling.classList.toggle('hidden'); this.nextElementSibling.classList.toggle('flex');">
      <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 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="hidden lg:flex w-full lg:w-auto mt-4 lg:mt-0 items-center justify-end flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Forecast
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Radar
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Climate
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500">
        Alerts
      </a>

      <!-- Search Bar -->
      <div class="relative">
        <input type="text" placeholder="Search city..." class="py-2 px-4 pl-10 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500 border border-gray-300 dark:border-gray-700 w-full lg:w-48 transition-colors duration-200">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
  </div>
</nav>

E-commerce Material Design Navigation

A complex, responsive, monochromatic e-commerce navigation component inspired by Material Design, featuring search, cart, user profile, and category links with dark mode support.

Open Preview

                <header class="bg-white dark:bg-gray-900 shadow-md font-sans w-full">
  <div class="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between">
    <!-- Logo & Brand Name -->
    <a href="#" class="flex items-center text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
      <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.5 16.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm7 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm-3.5-5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/>
      </svg>
      ShopHere
    </a>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:flex flex-grow max-w-lg mx-4">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right-aligned Icons (Profile, Cart, etc.) -->
    <div class="flex items-center space-x-4 sm:space-x-6">
      <!-- User Profile Dropdown -->
      <div class="relative group">
        <button class="flex items-center p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </button>
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">My Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Orders</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Wishlist</a>
          <hr class="my-1 border-gray-200 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign Out</a>
        </div>
      </div>

      <!-- Cart Icon -->
      <a href="#" class="relative p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full dark:bg-red-500 dark:text-white transform translate-x-1/2 -translate-y-1/2">3</span>
      </a>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
            <path id="mobile-menu-open-icon" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            <path id="mobile-menu-close-icon" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Search Bar -->
    <div class="w-full mt-3 md:hidden">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Navigation Links -->
  <nav id="main-navigation" class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 h-0 hidden md:flex md:h-auto overflow-hidden transition-all duration-300 ease-linear-out md:overflow-visible" style="opacity: 0;">
    <div class="container mx-auto px-4 py-2">
      <ul class="flex flex-col md:flex-row md:justify-around lg:justify-center md:space-x-8 lg:space-x-12">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Home
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0 flex items-center">
            Categories
            <svg class="ml-1 h-4 w-4 transform group-hover:rotate-180 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </a>
          <div class="absolute left-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-left">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a>
          </div>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Deals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            New Arrivals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Contact
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const openIcon = document.getElementById('mobile-menu-open-icon');
    const closeIcon = document.getElementById('mobile-menu-close-icon');

    mobileMenuButton.addEventListener('click', () => {
      const isHidden = mainNavigation.classList.contains('hidden');
      if (isHidden) {
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = mainNavigation.scrollHeight + 'px'; // Set height for smooth transition
        mainNavigation.style.opacity = '1';
        openIcon.classList.add('hidden');
        closeIcon.classList.remove('hidden');
      } else {
        mainNavigation.style.height = '0'; // Collapse height
        mainNavigation.style.opacity = '0';
        // Wait for transition to complete before hiding fully
        mainNavigation.addEventListener('transitionend', () => {
          if (mainNavigation.style.height === '0px') {
            mainNavigation.classList.add('hidden');
          }
        }, { once: true });
        openIcon.classList.remove('hidden');
        closeIcon.classList.add('hidden');
      }
    });

    // Handle window resize to collapse/show menu for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) { // md breakpoint
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = 'auto'; // Reset height for desktop
        mainNavigation.style.opacity = '1';
        openIcon.classList.remove('hidden'); // Ensure menu button is in 3-line state on desktop
        closeIcon.classList.add('hidden');
      } else {
        if (!mainNavigation.classList.contains('hidden')) {
            // If menu is open on mobile, collapse it when resizing to smaller than md
            mainNavigation.style.height = '0';
            mainNavigation.style.opacity = '0';
            mainNavigation.addEventListener('transitionend', () => {
              if (mainNavigation.style.height === '0px') {
                mainNavigation.classList.add('hidden');
              }
            }, { once: true });
            openIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
        }
      }
    });
  });
</script>

A clean, professional, and responsive navigation bar suitable for educational platforms, featuring a triadic color scheme, dark mode support, and a simple layout with common navigation links and a call-to-action button.

Open Preview

                <nav class="bg-blue-600 dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white dark:text-orange-300 text-2xl font-bold tracking-wide hover:text-orange-200 dark:hover:text-white transition duration-300">
      EduHub
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-blue-500 rounded-md p-2">
        <svg class="h-6 w-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>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Courses
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Programs
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        About Us
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Contact
      </a>
      <button class="bg-orange-500 dark:bg-emerald-500 text-white dark:text-gray-900 px-6 py-2 rounded-full font-semibold hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-md">
        Sign Up
      </button>
    </div>

  </div>

  <!-- Mobile Menu (hidden by default, shown via JS toggle if needed) -->
  <!-- For this pure HTML/Tailwind component, we can use a utility class to demonstrate the concept, 
       but a real implementation would require toggle class using JS. -->
  <div class="md:hidden bg-blue-700 dark:bg-gray-800 pb-3 hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Courses
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Programs
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Contact
      </a>
      <button class="block w-full text-left px-3 py-2 mt-2 rounded-md text-base font-semibold text-white dark:text-gray-900 bg-orange-500 dark:bg-emerald-500 hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-sm">
        Sign Up
      </button>
    </div>
  </div>
</nav>

Minimalist Jewel-Tone Food/Restaurant Navigation

A minimalist and responsive navigation component for food and restaurant websites, featuring jewel tones, dark mode support, and a clean flat design. Includes a logo, navigation links, and a call-to-action button, with a mobile-friendly hamburger menu.

Open Preview

                <nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
    </a>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        How It Works
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Restaurants
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <!-- Call to Action Button -->
    <div class="hidden md:block">
      <button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
  <!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
  <div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
    <a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
    <a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
    <a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
    <a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
    <div class="px-4 py-2">
      <button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>
  </div>
</nav>

Neumorphic Navigation Component

A simple, responsive navigation component with a neumorphic design style, using a purple/violet color scheme, suitable for a forum or community platform. Includes dark mode support.

Open Preview

                <nav class="p-4 bg-purple-200 dark:bg-purple-900 shadow-lg dark:shadow-purple-950 rounded-xl m-4 transition-all duration-300 ease-in-out">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="mb-4 md:mb-0">
      <a href="#" class="text-purple-800 dark:text-purple-200 text-3xl font-bold tracking-tight transform transition-transform duration-300 hover:scale-105">
        <span class="block relative leading-none">
          <span class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 dark:from-purple-700 dark:to-purple-900 rounded-lg blur-sm opacity-70"></span>
          <span class="relative z-10 p-2 rounded-lg shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark text-white dark:text-purple-100">Forum Hub</span>
        </span>
      </a>
    </div>
    <div class="flex flex-wrap justify-center space-x-2 md:space-x-4">
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h2v3H5V6zm4 0h2v3H9V6zm4 0h2v3h-2V6zM5 11h2v3H5v-3zm4 0h2v3H9v-3zm4 0h2v3h-2v-3z"></path></svg>
        Categories
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
        Messages
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
        Profile
      </a>
    </div>
  </div>
</nav>

<style>
  /* Neumorphic Shadows for Light Mode */
  .shadow-neumorphic {
    box-shadow: 6px 6px 12px #bca8e8, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-pressed {
    box-shadow: inset 4px 4px 8px #bca8e8, inset -4px -4px 8px #ffffff;
  }
  .shadow-inner-neumorphic {
    box-shadow: inset 3px 3px 6px #8e7eb8, inset -3px -3px 6px #d8c2ff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a1980, -6px -6px 12px #8e2cb7;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 4px 4px 8px #4a1980, inset -4px -4px 8px #8e2cb7;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #3a1566, inset -3px -3px 6px #5e1f9a;
  }
</style>

Monospace Social Media Navigation

A complex, responsive navigation component for social media applications, featuring a monospace/developer aesthetic with muted colors and dark mode support. Includes user profile, search, notifications, and primary navigation links.

Open Preview

                <nav class="bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200 p-4 border-b border-gray-300 dark:border-gray-800 font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between gap-4">
    <!-- Logo/Brand Name -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <span class="text-blue-600 dark:text-blue-400">//</span>social_feed
      </a>
    </div>

    <!-- Mobile Menu Toggle -->
    <button id="menu-toggle" class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200" 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>

    <!-- Primary Navigation Links (Hidden on mobile by default) -->
    <div id="nav-menu" class="hidden lg:flex flex-grow items-center justify-center space-x-6 text-sm flex-col lg:flex-row w-full lg:w-auto mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-6 w-full lg:w-auto text-center lg:text-left">
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>feed
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>explore
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>groups
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>messages
          </a>
        </li>
      </ul>
    </div>

    <!-- Right-aligned Icons and User Profile -->
    <div class="flex items-center space-x-4 flex-shrink-0 lg:ml-auto">
      <!-- Search Bar -->
      <div class="relative hidden sm:block">
        <input type="text" placeholder="search_user(" class="bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md py-2 pl-4 pr-10 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200 w-32 md:w-48 lg:w-64 placeholder-gray-500 dark:placeholder-gray-500">
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-500 text-xs">)</span>
      </div>
      
      <!-- Notification Icon -->
      <a href="#" aria-label="Notifications" class="relative p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute top-1 right-1 block w-2 h-2 rounded-full bg-red-500 border border-gray-100 dark:border-gray-950"></span>
      </a>

      <!-- User Profile Dropdown -->
      <div class="relative">
        <button id="profile-menu-button" class="flex items-center space-x-2 p-2 rounded-md text-gray-900 dark:text-gray-100 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="User menu">
          <img class="w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
          <span class="hidden md:inline text-sm">user@system</span>
          <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        
        <div id="profile-menu-dropdown" class="absolute right-0 mt-2 hidden w-48 bg-gray-100 dark:bg-gray-900 rounded-md shadow-lg py-1 border border-gray-300 dark:border-gray-800 origin-top-right z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>profile
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>settings
          </a>
          <div class="border-t border-gray-300 dark:border-gray-800 my-1"></div>
          <a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>logout
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu and profile dropdown
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const navMenu = document.getElementById('nav-menu');
    const profileMenuButton = document.getElementById('profile-menu-button');
    const profileMenuDropdown = document.getElementById('profile-menu-dropdown');

    menuToggle.addEventListener('click', function() {
      navMenu.classList.toggle('hidden');
      navMenu.classList.toggle('flex'); // Add flex for mobile menu to stack vertically
    });

    profileMenuButton.addEventListener('click', function() {
      profileMenuDropdown.classList.toggle('hidden');
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(event) {
      if (!profileMenuButton.contains(event.target) && !profileMenuDropdown.contains(event.target)) {
        profileMenuDropdown.classList.add('hidden');
      }
      // For mobile menu, only close if clicking outside of the menu area itself but allow clicks within the menu
      if (!menuToggle.contains(event.target) && !navMenu.contains(event.target) && window.innerWidth < 1024) {
        navMenu.classList.add('hidden');
        navMenu.classList.remove('flex');
      }
    });

    // Handle window resize for responsiveness
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's 'lg' breakpoint
        navMenu.classList.remove('hidden', 'flex');
        navMenu.classList.add('flex'); // Ensure it's flex on desktop
      } else {
        if (navMenu.classList.contains('flex')) { // If it was opened on mobile, keep it open, otherwise hide
             // Do nothing if it's already flex, as it means it was opened by menuToggle
        } else {
            navMenu.classList.add('hidden');
            navMenu.classList.remove('flex');
        }
      }
       profileMenuDropdown.classList.add('hidden'); // Close profile dropdown on resize
    });
  });
<\/script>

3D_Triadic_Simple_Business_Navigation

A simple, responsive business navigation component with a 3D design aesthetic and a triadic color scheme, supporting dark mode.

Open Preview

                <nav class="bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-xl dark:from-gray-800 dark:via-zinc-900 dark:to-black transition-all duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex-shrink-0">
      <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative group">
        <span class="block transform -translate-x-0.5 -translate-y-0.5 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 ease-out z-10 relative">3D Company</span>
        <span class="absolute inset-0 bg-yellow-300 dark:bg-sky-400 opacity-60 rounded-lg blur-sm group-hover:blur-md transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Home
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Services
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        About
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Contact
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-white hover:text-yellow-200 dark:hover:text-sky-300 focus:outline-none focus:text-yellow-200 dark:focus:text-sky-300" aria-label="Toggle navigation">
        <svg class="h-8 w-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <div id="mobile-menu" class="hidden md:hidden bg-indigo-600 dark:bg-gray-950">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Services</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Contact</a>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for mobile menu toggle (not part of Tailwind CSS component but for functional demo)
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        // Optional: Change icon on toggle
        const icon = button.querySelector('svg');
        if (menu.classList.contains('hidden')) {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        } else {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
        }
      });
    }
  });
</script>

Retro E-commerce Navigation

Responsive navigation component with retro/vintage design, earth tones, and dark mode support for e-commerce.

Open Preview

                <nav class="bg-amber-100 dark:bg-amber-950 p-4 font-serif">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold">RetroStore</a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Shop</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Categories</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Contact</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Cart</a>
    </div>
    <div class="md:hidden flex items-center">
      <button class="text-amber-700 dark:text-amber-300 focus:outline-none">
        <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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Navigation Component

A simple, responsive navigation component for a portfolio website, featuring a dark mode UI. The design uses complementary colors and ensures readability and aesthetic appeal on various screen sizes.

Open Preview

                <nav class="bg-gray-900 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-bold text-teal-400">MyPortfolio</a>
    <ul class="flex space-x-4">
      <li><a href="#about" class="hover:text-teal-400">About</a></li>
      <li><a href="#projects" class="hover:text-teal-400">Projects</a></li>
      <li><a href="#contact" class="hover:text-teal-400">Contact</a></li>
    </ul>
  </div>
</nav>