Search Components

Sticky Navigation

Navigation that remains visible when scrolling

Cyberpunk Sticky Navigation

A responsive, sticky navigation bar with a cyberpunk style, featuring sunset/warm tones, suitable for finance/banking interfaces. Includes dark mode support and interactive elements.

Open Preview

                <header class="w-full sticky top-0 z-50 transition-all duration-300 backdrop-blur-sm bg-gradient-to-r from-orange-600/80 to-red-700/80 dark:from-gray-900/90 dark:to-black/90 shadow-lg dark:shadow-xl dark:shadow-fuchsia-700/30">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-yellow-300 dark:text-fuchsia-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121a3 3 0 114.243 4.243L14.828 20.97a4 4 0 01-5.656 0L4.121 16.879a3 3 0 014.243-4.243m.86-10.428e-5L12 5m-2 4a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <a href="#" class="text-2xl font-extrabold text-white tracking-widest uppercase filter drop-shadow-md text-shadow-neon-orange dark:text-fuchsia-400 dark:text-shadow-neon-purple">SynthBank</a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Investments
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Loans
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Support
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-yellow-300 text-orange-800 hover:bg-yellow-400 transition-colors duration-300 dark:bg-fuchsia-600 dark:text-white dark:hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-orange-600 dark:focus:ring-fuchsia-500 dark:focus:ring-offset-gray-900">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 01d 3v1" />
        </svg>
      </button>
      <button class="md:hidden p-2 rounded-md text-white hover:bg-white/10 transition-colors duration-300 dark:text-fuchsia-300 dark:hover:bg-fuchsia-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:focus:ring-fuchsia-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div class="md:hidden origin-top transition-all duration-300 ease-out max-h-0 overflow-hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-start">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Investments</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Loans</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Support</a>
    </div>
  </div>
</header>

<style>
  /* This is a simple CSS workaround for the neon text effect if not using a utility class */
  /* For a more robust solution, consider a custom Tailwind plugin for text-shadow-neon */
  .text-shadow-neon-orange {
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.7),
                 0 0 10px rgba(255, 165, 0, 0.5),
                 0 0 20px rgba(255, 165, 0, 0.3);
  }
  .dark .text-shadow-neon-purple {
    text-shadow: 0 0 5px rgba(220, 38, 203, 0.7),
                 0 0 10px rgba(236, 72, 153, 0.5),
                 0 0 20px rgba(244, 114, 182, 0.3);
  }
</style>

<script>
  // Basic JavaScript for mobile menu toggle (required for interactive features).
  // Tailwind CSS alone cannot handle toggling classes based on user interaction directly.
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', !isExpanded);
        if (isExpanded) {
          mobileMenu.style.maxHeight = '0px';
        } else {
          mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
        }
      });
    }
  });
</script>

Sticky Navigation Component

A responsive, sticky navigation bar with neon/glow effects, suitable for education or learning platforms. Features a purple/violet color scheme, dark mode support, and interactive menu items.

Open Preview

                <header class="sticky top-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 shadow-lg dark:bg-gradient-to-r dark:from-gray-900 dark:to-black backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-purple-300 drop-shadow-[0_0_5px_rgba(192,132,252,0.8)] dark:text-purple-500 dark:drop-shadow-[0_0_8px_rgba(168,85,247,0.9)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
      <a href="#" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-300 drop-shadow-[0_0_8px_rgba(233,213,255,0.7)] dark:from-purple-400 dark:to-white dark:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
        EduGlow
      </a>
    </div>

    <!-- Mobile menu button -->
    <div class="md:hidden">
      <button class="text-purple-300 hover:text-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Desktop menu -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Courses
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        About Us
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
    </div>

    <!-- User Actions -->
    <div class="hidden md:flex items-center space-x-4">
      <button class="px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-900 border border-purple-500
      neon-button dark:bg-purple-800 dark:hover:bg-purple-700 dark:border-purple-700 dark:focus:ring-offset-gray-900">
        Sign In
      </button>
      <img class="h-9 w-9 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md transform hover:scale-105 transition duration-300 ease-in-out cursor-pointer drop-shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    </div>
  </nav>

  <!-- Mobile menu dropdown (hidden by default, controlled by JS in a real app) -->
  <div class="md:hidden bg-purple-900 dark:bg-gray-800 py-2 border-t border-purple-800 dark:border-gray-700">
    <div class="flex flex-col space-y-2 px-4">
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Home
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Courses
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        About Us
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Contact
      </a>
      <button class="w-full text-center px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 mt-2 neon-button dark:bg-purple-800 dark:hover:bg-purple-700">
        Sign In
      </button>
      <div class="flex justify-center mt-2">
        <img class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</header>

<style>
  /* Base for glow effects, typically handled by utilities, but for complex neon, custom CSS might be needed */
  .drop-shadow-\[0_0_5px_rgba\(192\,132\,252\,0\.8\)\] {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.8));
  }

  .dark\:drop-shadow-\[0_0_8px_rgba\(168\,85\,247\,0\.9\)\] {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }

  .drop-shadow-\[0_0_8px_rgba\(233\,213\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 0.7));
  }

  .dark\:drop-shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.8\)\] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .glow-effect {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.7), 0 0 12px rgba(192, 132, 252, 0.5);
    transition: all 0.3s ease-out;
    opacity: 0;
  }

  .group:hover .glow-effect {
    opacity: 1;
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .neon-button:hover::before {
    left: 100%;
  }

  .neon-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5), inset 0 0 5px rgba(139, 92, 246, 0.3);
  }

  .glow-border {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.8);
  }

  html.dark .glow-border {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
  }
</style>

Minimalist, responsive sticky navigation bar for a weather/climate website, featuring cool neutral colors, dark mode support, and interactive elements. Designed for medium complexity with functional links and a search bar.

Open Preview

                <header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
      Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
    </a>

    <div class="flex items-center gap-4 order-3 md:order-none">
      <div class="relative flex items-center">
        <input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
        <svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" 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>
      <button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
        <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="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
        </svg>
      </button>
    </div>

    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
      <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>
    </label>

    <div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Dashboard
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Forecast
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Maps
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        About
      </a>
    </div>
  </nav>
</header>

Sticky Navigation Component

A skeuomorphic sticky navigation component designed for news/journalism websites, featuring a black and white color scheme with a bright accent color, responsiveness, and dark mode support. It mimics real-world buttons and recessed elements.

Open Preview

                <header class="sticky top-0 z-50 py-4 shadow-skeuomorphic-light dark:shadow-skeuomorphic-dark bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <nav class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 md:px-6 lg:px-8">
    <!-- Logo/Site Title -->
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl lg:text-3xl font-extrabold text-gray-800 dark:text-gray-100 uppercase tracking-widest leading-none">
        <span class="text-red-600 dark:text-red-500">NEWS</span>CAST
      </a>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 lg:space-x-6 items-center flex-grow justify-center">
      <a href="#" class="nav-button">
        <span class="button-text">Latest</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Politics</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Business</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Tech</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Sports</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Opinion</span>
      </a>
    </div>

    <!-- Search and Theme Toggle -->
    <div class="flex items-center space-x-4 mt-4 md:mt-0">
      <!-- Search Button -->
      <button class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <svg class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="sr-only">Search</span>
      </button>

      <!-- Theme Toggle Button -->
      <button id="theme-toggle" class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <!-- Moon icon for light mode (default) -->
        <svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <!-- Sun icon for dark mode -->
        <svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.121-7.778l.707-.707a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm3.657 5.657l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM10 18a1 1 0 01-1 1v1a1 1 0 112 0v-1a1 1 0 01-1-1zm-4.95-2.121l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zm-2.121-7.778l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414z"></path>
        </svg>
        <span class="sr-only">Toggle theme</span>
      </button>
    </div>
  </nav>
</header>

<!-- Placeholder Content to Demonstrate Stickiness and give page height for scrolling -->
<div class="h-[1200px] bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-8 flex items-center justify-center">
  <p class="text-4xl font-light opacity-30">Scroll down to see the sticky header in action.</p>
</div>

<style>
  /* Skeuomorphic styles using custom properties for easy theme switching */
  .shadow-skeuomorphic-light {
    box-shadow: 
      inset 2px 2px 5px rgba(255, 255, 255, 0.7),
      inset -3px -3px 8px rgba(0, 0, 0, 0.2),
      5px 5px 15px rgba(0, 0, 0, 0.1), 
      -5px -5px 15px rgba(255, 255, 255, 0.8);
  }

  .dark .shadow-skeuomorphic-light, html.dark .shadow-skeuomorphic-light {
     box-shadow: none; /* Remove light shadows in dark mode */
  }

  .shadow-skeuomorphic-dark {
    box-shadow: 
      inset 5px 5px 10px rgba(0, 0, 0, 0.4),
      inset -5px -5px 10px rgba(255, 255, 255, 0.05),
      5px 5px 15px rgba(0, 0, 0, 0.4),
      -5px -5px 15px rgba(255, 255, 255, 0.08);
  }

  .light .shadow-skeuomorphic-dark, html.light .shadow-skeuomorphic-dark {
    box-shadow: none; /* Remove dark shadows in light mode */
  }

  /* Nav Button Base */
  .nav-button {
    @apply relative flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full shadow-skeuomorphic-button-light dark:shadow-skeuomorphic-button-dark transition-all duration-200;
    @apply bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-950;
  }

  /* Nav Button Text */
  .nav-button .button-text {
    @apply text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200;
  }

  /* Nav Button Hover/Active State */
  .nav-button:hover {
    @apply text-red-600 dark:text-red-500;
    @apply shadow-skeuomorphic-button-inset-light dark:shadow-skeuomorphic-button-inset-dark;
    @apply bg-gradient-to-tr from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
  }

  .shadow-skeuomorphic-button-light {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.1),
      -3px -3px 6px rgba(255, 255, 255, 0.6);
  }

  .shadow-skeuomorphic-button-dark {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.6),
      -3px -3px 6px rgba(255, 255, 255, 0.08);
  }

  .shadow-skeuomorphic-button-inset-light {
    box-shadow:
      inset 2px 2px 5px rgba(0, 0, 0, 0.15),
      inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }

  .shadow-skeuomorphic-button-inset-dark {
    box-shadow:
      inset 3px 3px 7px rgba(0, 0, 0, 0.8),
      inset -3px -3px 7px rgba(255, 255, 255, 0.05);
  }

  /* Media queries for responsiveness of buttons within the grid */
  @media (min-width: 768px) {
    .md\:flex-row > .nav-button {
      padding-left: 1rem; /* px-4 */
      padding-right: 1rem; /* px-4 */
    }
  }
  @media (min-width: 1024px) {
    .lg\:space-x-6 > .nav-button {
      margin-left: 1.5rem; /* space-x-6 */
      margin-right: 0; /* Override default margin from flex-row */
    }
    .lg\:space-x-6 > .nav-button + .nav-button {
      margin-left: 1.5rem; /* Re-apply margin between siblings */
    }
  }

</style>

<script>
  // Simple JS for theme toggle (Tailwind doesn't handle this automatically)
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;

    // Function to set theme based on localStorage or system preference
    const setTheme = (theme) => {
      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        htmlElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      } else {
        htmlElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      }
    };

    // Initial theme setting
    setTheme(localStorage.getItem('theme'));

    // Toggle theme on button click
    themeToggleBtn.addEventListener('click', () => {
      if (htmlElement.classList.contains('dark')) {
        setTheme('light');
      } else {
        setTheme('dark');
      }
    });
  });
</script>

Sticky Navigation Component

A clean, trustworthy, and simple sticky navigation bar suitable for corporate and event websites. Features black and white monochrome with a bright accent color, full responsiveness, and dark mode support.

Open Preview

                <header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
      <span>EventName</span>
    </a>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
    </div>

    <div class="md:hidden">
      <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

Sticky Navigation Component

A simple, clean, and high-contrast sticky navigation bar with a monospace/developer aesthetic, suitable for entertainment or media platforms.

Open Preview

                <nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

Retro_Vintage_Sticky_Navigation_Component

A complex, retro/vintage-inspired sticky navigation bar designed for event or conference websites, featuring a soft pastel color scheme, full responsiveness, and dark mode support. It includes a logo, navigation links, a call-to-action button, and a search icon.

Open Preview

                <header class="sticky top-0 z-50 w-full bg-pink-100/90 backdrop-blur-sm shadow-md transition-colors duration-300 dark:bg-zinc-800/90">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between font-mono text-pink-700 dark:text-pink-300">
    <div class="flex items-center space-x-4">
      <!-- Logo / Event Title -->
      <a href="#" class="text-2xl font-bold tracking-tight uppercase group dark:text-pink-100">
        <span class="block transform -rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-600 dark:text-pink-200">Future</span>
        <span class="block transform rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-800 dark:text-pink-400">Fest '92</span>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400">
        <svg class="w-7 h-7 text-pink-700 dark:text-pink-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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation & CTA -->
    <div class="hidden lg:flex items-center space-x-8">
      <ul class="flex space-x-6 text-lg">
        <li><a href="#schedule" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Schedule
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#speakers" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Speakers
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#tickets" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Tickets
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#venue" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Venue
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#faq" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          FAQ
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
      </ul>
      <a href="#buytickets" class="px-6 py-2 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
        <span class="inline-block transform skew-x-12">Get Tickets!</span>
      </a>
      <button class="p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
        <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500" 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>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-pink-50 dark:bg-zinc-700 px-4 py-4 border-t border-pink-200 dark:border-zinc-600 text-center font-mono">
    <ul class="flex flex-col space-y-4 text-lg text-pink-700 dark:text-pink-300">
      <li><a href="#schedule" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Schedule</a></li>
      <li><a href="#speakers" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Speakers</a></li>
      <li><a href="#tickets" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Tickets</a></li>
      <li><a href="#venue" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Venue</a></li>
      <li><a href="#faq" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">FAQ</a></li>
    </ul>
    <a href="#buytickets" class="mt-6 inline-block w-full max-w-xs px-6 py-3 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
      <span class="inline-block transform skew-x-12">Get Tickets!</span>
    </a>
    <button class="mt-4 p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
      <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500 mx-auto" 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>
    </button>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle (required for interaction)
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link is clicked
      const menuLinks = mobileMenu.querySelectorAll('a');
      menuLinks.forEach(link => {
        link.addEventListener('click', function() {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>

Sticky Navigation Component - Neumorphic Pastel

A complex, sticky navigation component with a Neumorphism design style and pastel color scheme, suitable for documentation or wiki sites. It features nested navigation items, a search bar, and dark mode support, all implemented with HTML and Tailwind CSS for full responsiveness.

Open Preview

                <header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
  <nav class="container mx-auto flex items-center justify-between flex-wrap">
    <div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
      <a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
    </div>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
        <svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
      <ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Features
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
          </div>
        </li>
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Guides
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
          </div>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Community
          </a>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Blog
          </a>
        </li>
      </ul>
      <div class="mt-4 lg:mt-0 flex items-center">
        <div class="relative w-full lg:max-w-xs">
          <input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none 
            shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
            focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
            <svg class="h-5 w-5" 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>
        <button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
          <svg class="h-5 w-5" 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.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
          <span class="sr-only">Toggle Dark Mode</span>
        </button>
        <a href="#" class="ml-4 p-1 rounded-full 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="sr-only">User Profile</span>
        </a>
      </div>
    </div>
  </nav>
</header>

<style>
  /* Base light neumorphic shadows */
  .shadow-neumorphic-light-sm {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-light-md {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
  }

  /* Inset light neumorphic shadows */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  /* Base dark neumorphic shadows */
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-md {
    box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
  }

  /* Inset dark neumorphic shadows */
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
  }

  /* Override Tailwind shadow for header shadow-xl */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }

  /* Hamburger menu JS to toggle content */
  @media (max-width: 1023px) {
    .lg\:hidden + div {
      display: none;
    }
    .lg\:hidden + div.active {
      display: block;
    }
  }

  /* Simple JS for mobile menu and dark mode toggle */
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('.lg\:hidden button');
    const navCollapse = document.getElementById('navbar-collapse');
    const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');

    // Mobile menu toggle
    if (menuButton && navCollapse) {
      menuButton.addEventListener('click', () => {
        navCollapse.classList.toggle('hidden');
        if (!navCollapse.classList.contains('hidden')) {
          navCollapse.classList.add('active'); // Add active for custom CSS display
        } else {
          navCollapse.classList.remove('active');
        }
      });
    }

    // Dark mode toggle
    if (darkModeToggle) {
      darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        // Save preference (optional)
        if (document.documentElement.classList.contains('dark')) {
          localStorage.setItem('theme', 'dark');
        } else {
          localStorage.setItem('theme', 'light');
        }
      });

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

    // Close dropdowns when clicking outside (basic, for demonstration)
    document.addEventListener('click', (e) => {
      document.querySelectorAll('.group.relative').forEach(dropdown => {
        if (!dropdown.contains(e.target)) {
          dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
          dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
          dropdown.querySelector('a svg')?.classList.remove('rotate-180');
        }
      });
    });


    // For accessibility/keyboard navigation for dropdowns (complex; basic example)
    document.querySelectorAll('.group.relative > a').forEach(link => {
      link.addEventListener('focus', () => {
        link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
        link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
      });

      link.addEventListener('blur', (event) => {
        if (!link.parentElement.contains(event.relatedTarget)) {
          link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
          link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
        }
      });
    });
  });
<\/style>

Sticky Navigation Component

A simple, responsive, and sticky navigation bar suitable for a marketplace, featuring an analogous color scheme and dark mode support. Includes subtle microinteractions on hover.

Open Preview

                <header class="sticky top-0 z-50 bg-emerald-100/90 backdrop-blur-sm shadow-sm dark:bg-emerald-950/90 dark:shadow-lg transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <a href="#" class="flex items-center group">
        <svg class="h-8 w-8 text-emerald-600 dark:text-emerald-300 group-hover:rotate-6 transition-transform duration-200 ease-out" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM5.293 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L10 9.586l-1.293-1.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-2xl font-bold tracking-tight text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-200 transition-colors duration-200">MarketPulse</span>
      </a>
      <ul class="hidden md:flex space-x-6">
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Products
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Categories
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Vendors
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
      </ul>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Search">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Cart">
        <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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13H4m0 0l2 2m-2-2a2 2 0 100 4 2 2 0 000-4zM17 13h-4m4 0l-2 2m2-2a2 2 0 100 4 2 2 0 000-4z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hidden md:block bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="h-7 w-7 rounded-full object-cover border border-emerald-300 dark:border-emerald-700">
      </button>
      <div class="flex items-center space-x-2">
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105">
          <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 4a1 1 0 011 1v1a1 1 0 11-2 0V7a1 1 0 011-1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM9 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.586 5.586a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-.707-.707zm5.657 8.947a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707zM4 10a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <button class="md:hidden p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Open menu">
        <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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </nav>
</header>

<script>
  // Dark mode functionality (optional, not part of the HTML/CSS requirement but common for such components)
  const toggleDarkMode = () => {
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  };

  const darkLightToggle = document.getElementById('dark-mode-toggle');
  if (darkLightToggle) {
    darkLightToggle.addEventListener('click', toggleDarkMode);
  }

  // Apply saved theme on load
  if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

Sticky Navigation Component

A simple, clean, and trustworthy sticky navigation bar suitable for corporate and professional websites, especially job boards and career platforms. Features high-contrast colors, responsiveness, and dark mode support.

Open Preview

                <nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-800 transition duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
      JobBoard
    </a>

    <!-- Navigation Links - Desktop -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Jobs</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Companies</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Candidates</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">About Us</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Contact</a>
    </div>

    <!-- Action Buttons - Desktop -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
        Sign In
      </a>
      <a href="#" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Post a Job
      </a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, shown by JS in a real app) -->
  <div class="md:hidden flex flex-col space-y-2 p-4 border-t border-gray-200 dark:border-gray-700" style="display: none;">
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Jobs</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Companies</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Candidates</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">About Us</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Contact</a>
    <a href="#" class="block px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-center transition duration-200 mt-2">Sign In</a>
    <a href="#" class="block px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">Post a Job</a>
  </div>
</nav>