Search Components

Navigation Components

Components that help users navigate through the website and find content

Social Media Navigation

A responsive social media navigation component with a muted/desaturated color scheme, inspired by Material Design principles, supporting light and dark modes. Features grid-based layout and depth effects.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-800 dark:text-gray-200 tracking-wide hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-300">
        SocialSphere
      </a>
    </div>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:block flex-grow max-w-lg mx-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-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>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>Messages</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-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="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.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span>Notifications</span>
      </a>
    </div>

    <!-- Avatar/Profile (Desktop/Tablet) -->
    <div class="hidden md:block flex-shrink-0 ml-4">
      <a href="#" class="block relative">
        <img class="h-10 w-10 rounded-full border-2 border-gray-400 dark:border-gray-500 object-cover hover:ring-2 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-300" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Search Bar -->
  <div class="md:hidden mt-4">
    <div class="relative">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-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>

  <!-- Mobile Bottom Navigation (Fixed) -->
  <div class="fixed bottom-0 left-0 right-0 bg-gray-100 dark:bg-gray-800 shadow-lg md:hidden p-3 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300 z-40">
    <div class="flex justify-around items-center w-full">
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span class="text-xs mt-1">Home</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span class="text-xs mt-1">Chats</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <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="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.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span class="text-xs mt-1">Alerts</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300 relative">
        <img class="h-6 w-6 rounded-full border border-gray-400 dark:border-gray-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute top-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-500 -translate-y-1 translate-x-1"></span>
        <span class="text-xs mt-1">Profile</span>
      </a>
    </div>
  </div>
</nav>

Cyberpunk Weather Navigation

A simple, responsive cyberpunk-themed navigation component for a weather application, featuring muted colors and neon accents, with dark mode support.

Open Preview

                <nav class="bg-neutral-900 py-4 dark:bg-black shadow-lg">
  <div class="container mx-auto px-4 flex justify-between items-center">
    <a href="#" class="text-blue-400 text-2xl font-bold font-mono tracking-widest dark:text-cyan-400 select-none">
      <span class="text-blue-500 dark:text-cyan-500">WΞATHЯ</span><span class="text-neutral-500 dark:text-neutral-700">_SYS</span>
    </a>

    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Current
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Forecast
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Radar
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
        Settings
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button class="text-blue-400 text-2xl focus:outline-none dark:text-cyan-400" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Playful Grayscale Crypto Navigation Component

A playful and friendly grayscale navigation component for cryptocurrency and blockchain applications, featuring rounded elements, interactive states, full responsiveness, and dark mode support.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-md rounded-b-3xl p-4 md:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-3xl font-extrabold flex items-center group">
        <svg class="w-9 h-9 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors duration-200" 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 8h6m-5 0v3m-2.83 5.46a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27m7.53 1.05a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27"></path>
        </svg>
        CoinWave
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 rounded-full p-2 ml-4">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 transition-transform duration-200" 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>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Dashboard</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Markets</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Wallet</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Trade</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Academy</a>

      <div class="flex items-center space-x-4 mt-4 md:mt-0">
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <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="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>
        </button>
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer">
        <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <svg class="w-7 h-7 hidden dark:block" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-8.226l-.707-.707m-4.004 4.004l-.707-.707m11.313 11.313l-.707-.707m-4.004-4.004l-.707-.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <svg class="w-7 h-7 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggle functionality (not part of the HTML component, but for interactivity demonstration)
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');
  const themeToggle = document.getElementById('theme-toggle');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
    navbarMenu.classList.toggle('flex-col');
  });

  // Dark mode functionality
  function setTheme(theme) {
    localStorage.setItem('theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }

  // On page load or when dark mode is changed
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    setTheme(storedTheme);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme('dark');
  } else {
    setTheme('light');
  }

  themeToggle.addEventListener('click', () => {
    const currentTheme = localStorage.getItem('theme');
    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
  });
</script>

Neon Glow Government Navigation

A responsive navigation component for government/public services with a neon glow, candy-sweet color scheme, and dark mode support. Features bright, glowing elements with vibrant lighting effects.

Open Preview

                <nav class="bg-gradient-to-r from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-950 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo/Brand Section -->
    <a href="#" class="flex items-center space-x-2 text-lg font-bold text-purple-700 dark:text-cyan-400 group relative">
      <svg class="h-8 w-8 text-pink-500 dark:text-teal-400 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal] transition-all duration-300" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
      </svg>
      <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_rgba(192,38,211,0.8)] dark:group-hover:drop-shadow-[0_0_8px_rgba(45,212,191,0.8)] transition-all duration-300">PublicPulse</span>
      <div class="absolute inset-0 bg-transparent rounded-lg blur-sm group-hover:bg-purple-300/30 dark:group-hover:bg-cyan-600/30 transition-all duration-300 scale-x-0 group-hover:scale-x-100 origin-left"></div>
    </a>

    <!-- Mobile Toggle Button (Hidden on larger screens) -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer lg:hidden block text-purple-700 dark:text-cyan-400 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-cyan-500 rounded p-2 relative z-20">
      <svg class="h-6 w-6 peer-checked:hidden" 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>
      <svg class="h-6 w-6 hidden peer-checked:block" 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>
    </label>

    <!-- Navigation Links -->
    <div class="w-full lg:flex lg:items-center lg:w-auto mt-4 lg:mt-0 hidden peer-checked:block transition-all duration-500 ease-in-out" id="navbar-default">
      <ul class="flex flex-col lg:flex-row lg:space-x-8 text-sm font-medium w-full lg:w-auto">
        <li>
          <a href="#" class="relative block py-2 px-3 text-pink-600 dark:text-teal-300 rounded hover:bg-pink-200 dark:hover:bg-teal-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-teal-500">
            Home
            <span class="absolute inset-0 z-0 bg-gradient-to-r from-pink-300/30 to-purple-300/30 dark:from-teal-600/30 dark:to-cyan-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-purple-600 dark:text-orange-300 rounded hover:bg-purple-200 dark:hover:bg-orange-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-orange-500">
            Services
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-purple-300/30 to-yellow-300/30 dark:from-orange-600/30 dark:to-amber-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_purple] dark:group-hover:drop-shadow-[0_0_8px_orange]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-green-600 dark:text-lime-300 rounded hover:bg-green-200 dark:hover:bg-lime-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-lime-500">
            About Us
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-green-300/30 to-blue-300/30 dark:from-lime-600/30 dark:to-emerald-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_green] dark:group-hover:drop-shadow-[0_0_8px_lime]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-blue-600 dark:text-cyan-300 rounded hover:bg-blue-200 dark:hover:bg-cyan-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-500">
            Contact
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-blue-300/30 to-indigo-300/30 dark:from-cyan-600/30 dark:to-sky-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_blue] dark:group-hover:drop-shadow-[0_0_8px_cyan]"></span>
          </a>
        </li>
         <li>
          <a href="#" class="relative block py-2 px-3 text-yellow-600 dark:text-amber-300 rounded hover:bg-yellow-200 dark:hover:bg-amber-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-amber-500">
            FAQ
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-yellow-300/30 to-orange-300/30 dark:from-amber-600/30 dark:to-orange-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_yellow] dark:group-hover:drop-shadow-[0_0_8px_amber]"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Cyberpunk_Food_Nav

A simple, responsive cyberpunk-themed navigation component for food/restaurant websites, featuring dark backgrounds, neon accents, and dark mode support.

Open Preview

                <header class="bg-zinc-950 dark:bg-black text-lime-400 p-4 shadow-lg shadow-lime-900/30 dark:shadow-fuchsia-900/30">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold font-mono tracking-wider transition-colors duration-300 hover:text-lime-200 dark:hover:text-fuchsia-400">
      BYTE BITES
    </a>

    <div class="hidden md:flex space-x-6 text-lg">
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Menu</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Order</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Locations</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Contact</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button class="text-lime-400 dark:text-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-fuchsia-600 rounded-md p-1">
        <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>
  </nav>
</header>

GamingNavigationComponent

A complex, responsive top navigation bar for gaming websites, inspired by organic/nature themes with an analogous color scheme. Features a logo, navigation links, user avatar, and call-to-action buttons, with full dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-green-700 via-emerald-800 to-teal-900 shadow-xl dark:from-green-900 dark:via-emerald-950 dark:to-teal-950 px-4 py-3 md:py-4 relative z-50 animate-fade-in-down">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2 lg:space-x-3 transition-transform transform hover:scale-105 duration-300 ease-in-out">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-gray-200 drop-shadow-md brightness-110" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm.052 4.908l-.754-.754a1 1 0 011.414-1.414l.707.707.707-.707a1 1 0 011.414 1.414l-.754.754-.754.754a1 1 0 01-1.414-1.414l.707-.707-.707-.707a1 1 0 01-1.414 1.414zM13 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
      </svg>
      <span class="font-extrabold text-2xl md:text-3xl text-white dark:text-gray-100 drop-shadow-lg font-['Orbitron',_sans-serif]">NexusPlay</span>
    </a>

    <!-- Mobile Menu Button -->
    <button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white dark:text-gray-200 hover:text-emerald-300 focus:text-emerald-300 transition-colors duration-300 ease-in-out" aria-label="Toggle navigation">
      <svg class="w-7 h-7 md:w-8 md: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>

    <!-- Navigation Links & User Actions Wrapper (Initially hidden on mobile) -->
    <div id="mobile-menu" class="hidden lg:flex flex-col lg:flex-row items-center lg:space-x-8 mt-4 lg:mt-0 w-full lg:w-auto transition-all duration-300 ease-linear origin-top scale-y-0 lg:scale-y-100 transform">
      <ul class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-8 text-lg lg:text-xl font-medium text-white dark:text-gray-200 w-full lg:w-auto border-t border-emerald-600 dark:border-emerald-800 lg:border-none pt-4 lg:pt-0">
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Games
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
         <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Community
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Shop
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 hidden group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Support
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
      </ul>

      <div class="flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-4 mt-4 lg:mt-0 w-full lg:w-auto">
        <!-- Search Bar (hidden on smaller mobile) -->
        <div class="relative hidden sm:block w-full lg:w-auto">
          <input type="text" placeholder="Search games..." class="w-full lg:w-48 xl:w-56 pl-10 pr-4 py-2 rounded-full bg-emerald-800 dark:bg-emerald-900 border border-emerald-600 dark:border-emerald-800 text-white dark:text-gray-200 placeholder-emerald-200 dark:placeholder-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:border-transparent transition-all duration-300 ease-in-out text-base shadow-inner">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-emerald-300 dark:text-emerald-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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"></path>
          </svg>
        </div>

        <!-- Call to Action Buttons -->
        <button class="px-5 py-2 w-full lg:w-auto rounded-full bg-emerald-500 dark:bg-emerald-700 text-white dark:text-gray-100 font-semibold shadow-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 text-base whitespace-nowrap overflow-hidden text-ellipsis">
          Play Now
        </button>
        <button class="px-5 py-2 w-full lg:w-auto rounded-full bg-transparent border border-emerald-300 dark:border-emerald-500 text-emerald-100 dark:text-emerald-300 font-semibold shadow-md active:scale-95 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 text-base whitespace-nowrap overflow-hidden text-ellipsis">
          Sign Up
        </button>

        <!-- User Avatar with Dropdown (placeholder for JS functionality) -->
        <div class="relative group hidden sm:block">
          <button class="flex items-center space-x-2 focus:outline-none transition-transform transform hover:scale-105 duration-300 ease-in-out" aria-label="User menu">
            <img class="w-10 h-10 rounded-full border-2 border-emerald-300 dark:border-emerald-500 shadow-md transform hover:rotate-3 transition-transform duration-300 ease-in-out" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <span class="text-white dark:text-gray-200 font-semibold hidden md:inline">PlayerOne</span>
            <svg class="w-4 h-4 text-white dark:text-gray-200 hidden md:inline" 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>
          <!-- Dropdown content (can be implemented with JS for interactive behavior) -->
          <div class="absolute right-0 mt-2 w-48 bg-emerald-700 dark:bg-emerald-900 rounded-lg shadow-xl py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-out transform scale-y-0 origin-top group-hover:scale-y-100 border border-emerald-600 dark:border-emerald-800">
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Profile</a>
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Settings</a>
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Inline Script for mobile menu toggle (for demonstration, as requested for no JS, but necessary for menu functionality) -->
<style>
  /* Keyframe for fading in/down */
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out both;
  }

  /* Tailwind's `hidden` is `display: none`. For transitions, we need `max-height` or `scaleY` */
  /* This is a simple toggle. For a true 'no-JS' solution, one would use CSS :target or equivalent, which is complex for navs. */
  /* Or rely on media queries, but that doesn't allow user interaction for collapsing. */
  /* The following style makes the mobile menu actually animate */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
  }
  #mobile-menu.open {
    max-height: 500px; /* Adjust based on content */
    opacity: 1;
    /* To make scaleY work with other styles, we toggle `hidden` class in JS */
    /* or explicitly set display: block/flex and let transition handle max-height/opacity/transform */
  }

  @media (min-width: 1024px) {
    #mobile-menu {
      max-height: none !important; /* override max-height for large screens */
      opacity: 1 !important;
      display: flex !important;
      transform: scaleY(1) !important;
    }
  }
</style>
<script>
  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'); // Tailwind's 'hidden' class
        menu.classList.toggle('open'); // Custom class for max-height transition
        menu.classList.toggle('flex'); // Ensure flex display when open
        menu.classList.toggle('scale-y-0'); // ScaleY for transform transition
        menu.classList.toggle('scale-y-100');
      });

      // Close menu when clicking outside (optional, but good UX)
      document.addEventListener('click', function(event) {
        if (!menu.contains(event.target) && !button.contains(event.target) && menu.classList.contains('open')) {
          menu.classList.remove('open');
          menu.classList.add('hidden');
          menu.classList.remove('flex');
          menu.classList.remove('scale-y-100');
          menu.classList.add('scale-y-0');
        }
      });

      // Handle resize to ensure menu state is correct on desktop
      window.addEventListener('resize', function() {
        if (window.innerWidth >= 1024) { // Equivalent to lg breakpoint
          menu.classList.remove('hidden', 'open', 'scale-y-0');
          menu.classList.add('flex', 'scale-y-100');
        } else {
           // If navigating back to mobile size and menu was previously open, keep it consistent or close.
           // For simplicity, we'll just ensure it takes 'hidden' if not activated by button.
           // If 'open' is still there, it means user opened it before resizing.
           if (!menu.classList.contains('open')) {
              menu.classList.add('hidden');
              menu.classList.remove('flex');
              menu.classList.remove('scale-y-100');
              menu.classList.add('scale-y-0');
           }
        }
      });
    }
  });
</script>

Dark Mode Portfolio Navigation

A complex, responsive navigation component for a portfolio website, featuring a dark mode UI with analogous colors, designed to showcase work or products. Includes desktop, tablet, and mobile layouts with dropdowns and user avatar.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-950 shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 text-white text-2xl font-bold tracking-wider">
          Portfolio
        </a>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a>
            <div class="relative group">
              <button class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 flex items-center">
                Projects
                <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
                </svg>
              </button>
              <div class="absolute hidden group-hover:block z-10 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100">
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
              </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition-colors duration-300">
            <span class="absolute -inset-1.5"></span>
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
            </svg>
          </button>

          <!-- Profile dropdown -->
          <div class="relative ml-3 group">
            <div>
              <button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="absolute -inset-1.5"></span>
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt="User Avatar">
              </button>
            </div>

            <div class="absolute hidden group-hover:block right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-800 dark:bg-gray-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <button class="dark-mode-toggle block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition duration-300" role="menuitem" tabindex="-1" id="user-menu-item-2">
                Toggle Dark Mode
              </button>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-3">Sign out</a>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6 close-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden mobile-menu" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="flex items-center w-full text-left text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">
          Projects
          <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
          </svg>
        </button>
        <div class="pl-6 py-1 mobile-submenu hidden">
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
        </div>
      </div>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">About</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Contact</a>
    </div>
    <div class="border-t border-gray-700 pb-3 pt-4">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-white">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Settings</a>
        <button class="dark-mode-toggle block w-full text-left rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 transition duration-300">
          Toggle Dark Mode
        </button>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark mode toggle functionality
  const darkModeToggleButtons = document.querySelectorAll('.dark-mode-toggle');

  darkModeToggleButtons.forEach(button => {
    button.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      // Store user preference in local storage
      if (document.documentElement.classList.contains('dark')) {
        localStorage.theme = 'dark';
      } else {
        localStorage.theme = 'light';
      }
    });
  });

  // Check for stored theme preference on load
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  // Mobile menu toggle functionality
  const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = mobileMenuButton.querySelector('.menu-icon');
  const closeIcon = mobileMenuButton.querySelector('.close-icon');

  mobileMenuButton.addEventListener('click', () => {
    const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
    mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
    mobileMenu.classList.toggle('hidden');
    menuIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
  });

  // Mobile submenu toggle functionality (simple for demonstration)
  const mobileProjectsButton = document.querySelector('#mobile-menu .group button');
  const mobileSubmenu = document.querySelector('#mobile-menu .mobile-submenu');

  if (mobileProjectsButton) {
    mobileProjectsButton.addEventListener('click', () => {
      mobileSubmenu.classList.toggle('hidden');
    });
  }
</script>

Neumorphic Social Media Navigation

A simple, responsive social media navigation component with a soft UI neumorphic design. It uses a monochromatic color scheme and supports dark mode.

Open Preview

                <nav class="p-4 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-bold text-gray-700 dark:text-gray-200">NuSocial</div>
    <div class="flex space-x-4 md:space-x-6">
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Home">
        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0v-9M9 21h6"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Messages">
        <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Notifications">
        <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>
      </a>
      <button
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="User profile">
        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-6 h-6 rounded-full object-cover">
      </button>
    </div>
  </div>
  
  <!-- Custom Styles for Neumorphic Shadow -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #6e6e6e, -6px -6px 12px #929292;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #6e6e6e, inset -6px -6px 12px #929292;
    }
  </style>
</nav>

RetroDashboardNavigation

A complex, retro-themed dashboard navigation component with triadic color scheme, designed for data visualization and control panels. Features responsive design, dark mode support, and multiple interactive elements inspired by 80s/90s aesthetics.

Open Preview

                <header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold uppercase flex items-center group">
        <span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">&#9650;</span>
        <span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
          Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
          <span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
        </span>
      </a>
      <button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
        <svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors duration-200" 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>

    <nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Dashboard
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
        <button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
          Settings
          <svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-300" 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>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        </button>
        <div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
          <hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
        </div>
      </div>
    </nav>

    <div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
      <div class="relative group">
        <button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
          <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-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
        </button>
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
      </div>
      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
      </div>
      <button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
          <path class="moon-icon hidden" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>
  </div>
</header>

<style>
  @keyframes slide-down-fade {
    from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  .animate-slide-down-fade {
    animation: slide-down-fade 0.3s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.2s ease-out forwards;
  }

  /* Retro text stroke effect for branding */
  .text-stroke-thin {
    -webkit-text-stroke: 0.5px currentColor;
    text-stroke: 0.5px currentColor;
  }

  /* Mobile menu responsiveness (JS controlled visibility) */
  @media (max-width: 767px) {
    .nav-item {
      /* Ensures full width clickable area on mobile */
      display: block;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0.5rem; /* spacing between items */
      background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
      border-radius: 0.25rem;
    }
    .dark .nav-item {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
     .dark .nav-item:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu {
        position: static !important; /* override absolute positioning */
        transform: none !important; /* override transform */
        width: 100% !important; /* full width */
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }
    .dropdown-menu a {
        padding-left: 2.5rem; /* indent dropdown items */
    }
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const sunIcon = darkModeToggle.querySelector('.sun-icon');
    const moonIcon = darkModeToggle.querySelector('.moon-icon');

    // Mobile menu toggle
    mobileMenuButton.addEventListener('click', () => {
      mainNavigation.classList.toggle('hidden');
      mainNavigation.classList.toggle('flex');
      if (mainNavigation.classList.contains('flex')) {
        mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
      }
    });

    // Dark mode toggle
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
    };

    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
    };

    // Initial theme setup
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      enableDarkMode();
    } else {
      disableDarkMode();
    }

    darkModeToggle.addEventListener('click', () => {
      if (document.documentElement.classList.contains('dark')) {
        disableDarkMode();
      } else {
        enableDarkMode();
      }
    });
  });
</script>

Social Media Navigation Component

A simple, responsive navigation component for social media applications, with a dark theme and Material Design-inspired complementary color scheme. It includes a logo, navigation links, and a user avatar.

Open Preview

                <nav class="bg-blue-500 dark:bg-blue-900 p-4 shadow-md">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-white text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Home</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Notifications</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Messages</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Profile</a>
    </div>

    <!-- User Avatar -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white 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>

  <!-- Mobile Navigation (Hidden by default) -->
  <div class="md:hidden mt-4 space-y-2">
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Home</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Notifications</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Messages</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Profile</a>
  </div>
</nav>

Search Components

Categories

Navigation Components