Search Components

Header

Top section of the website, typically containing logo and navigation

3D Retro Weather Header Component

A complex, retro-themed header component for a weather/climate application, featuring 3D design elements, a muted color palette, and full responsiveness with dark mode support. It displays current weather info, location, date, and navigation.

Open Preview

                <header class="bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 shadow-xl relative overflow-hidden">
  <!-- Retro textured background overlay -->
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-10 dark:opacity-5"></div>

  <!-- Pseudo-3D Depth Effect (subtle gradient/shadows) -->
  <div class="absolute inset-0 rounded-b-lg" style="box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1), inset 0 10px 20px rgba(255,255,255,0.2), 0 5px 15px rgba(0,0,0,0.2) inset;"></div>

  <div class="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between space-y-6 lg:space-y-0 lg:space-x-8">

    <!-- Left Section: Logo & Brand Name -->
    <div class="flex items-center space-x-3 transform -skew-x-3 rotate-1 lg:skew-x-0 lg:rotate-0">
      <svg class="w-10 h-10 text-rose-600 dark:text-amber-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 21.5c-3.866 0-7-3.134-7-7 0-4.018 7-14.5 7-14.5s7 10.482 7 14.5c0 3.866-3.134 7-7 7zM12 4.5l-5.4 9.1C6.2 14.3 6 14.7 6 15c0 3.313 2.687 6 6 6s6-2.687 6-6c0-.3-.2-.7-.6-1.4L12 4.5zM12 18a3 3 0 100-6 3 3 0 000 6z"/>
      </svg>
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-purple-700 dark:text-indigo-300 font-serif drop-shadow-md">AetherCast</h1>
    </div>

    <!-- Middle Section: Main Weather Info (Current Temperature, Location, Date) -->
    <div class="flex-grow text-center lg:text-left space-y-2 lg:space-y-0 lg:space-x-8 flex flex-col lg:flex-row items-center justify-center">
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/id/1066/60/60" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20 object-cover rounded-full shadow-lg transform rotate-6 hover:rotate-0 transition-transform duration-300" />
        <div>
          <p class="text-5xl sm:text-6xl font-bold text-indigo-700 dark:text-teal-400 drop-shadow-lg">24°C</p>
          <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 tracking-wide mt-1">Partly Cloudy</p>
        </div>
      </div>
      <div class="border-t lg:border-l border-b lg:border-b-0 border-gray-400 dark:border-gray-600 my-4 lg:w-px h-full hidden lg:block"></div>
      <div class="text-center">
        <p class="text-2xl sm:text-3xl font-semibold text-rose-600 dark:text-amber-400 drop-shadow-sm">London, UK</p>
        <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">Saturday, October 26, 2024</p>
      </div>
    </div>

    <!-- Right Section: Interactive Elements (Search, Settings, User Profile) -->
    <div class="flex items-center space-x-4 sm:space-x-6">
      <button class="p-3 rounded-full bg-pink-400 dark:bg-purple-700 text-white shadow-xl hover:scale-105 active:scale-95 transition-transform duration-200 transform -translate-y-1 hover:translate-y-0">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        <span class="sr-only">Search</span>
      </button>
      <button class="p-3 rounded-full bg-teal-400 dark:bg-sky-700 text-white shadow-xl hover:scale-105 active:scale-95 transition-transform duration-200 transform translate-x-1 hover:translate-x-0">
        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="sr-only">Settings</span>
      </button>
      <div class="w-12 h-12 rounded-full overflow-hidden border-4 border-purple-500 dark:border-indigo-400 shadow-xl transform skew-y-2 hover:skew-y-0 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-full h-full object-cover" />
      </div>
    </div>

    <!-- Bottom Navigation (Hidden on small screens, shown as full width on larger) -->
    <nav class="absolute bottom-0 left-0 right-0 py-2 sm:py-3 bg-gradient-to-t from-gray-300 to-transparent dark:from-gray-950 dark:to-transparent lg:relative lg:bg-none lg:p-0 lg:mt-0 mt-6 md:mt-8">
      <ul class="flex flex-wrap justify-center space-x-4 sm:space-x-8 px-4">
        <li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Today</a></li>
        <li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Hourly</a></li>
        <li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">5 Day</a></li>
        <li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Radar</a></li>
        <li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Climate</a></li>
      </ul>
    </nav>
  </div>
</header>

Header Component

A simple, responsive header component for a blog or content site with monochromatic styling and dark mode support, focusing on subtle microinteractions when hovering over navigation links.

Open Preview

                <header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Cyberpunk Header Component

A futuristic Cyberpunk-themed header component for documentation or wiki sites. Features a dark background with vibrant neon accents (electric blue, hot pink, lime green), responsive navigation, and dark mode support.

Open Preview

                <header class="bg-zinc-950 text-lime-400 border-b border-lime-600/30 shadow-lg shadow-lime-600/10 dark:bg-black dark:text-fuchsia-400 dark:border-fuchsia-600/30 dark:shadow-fuchsia-600/10">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Site Title -->
    <a href="#" class="flex items-center space-x-2 relative group">
      <svg class="w-8 h-8 text-electric-blue-400 group-hover:text-electric-blue-300 transition-colors duration-300 dark:text-hot-pink-400 dark:group-hover:text-hot-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="M9.75 17L9.75 17.01M12.000000000000002 21L12 21.01M14.25 17L14.25 17.01M12 3C10.73 3 7 4.12 7 9C7 11.83 8.36 13.92 9.77 15.14C11.18 16.35 12 17.67 12 19L12 21M9 6L15 6M10 9L14 9M11 12L13 12"></path>
      </svg>
      <span class="font-extrabold text-2xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-electric-blue-500 group-hover:from-lime-300 group-hover:to-electric-blue-400 transition-all duration-300 dark:from-fuchsia-400 dark:to-hot-pink-500 dark:group-hover:from-fuchsia-300 dark:group-hover:to-hot-pink-400">
        NEO-DOCS
      </span>
      <span class="absolute inset-0 bg-lime-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-lg blur-sm pointer-events-none dark:bg-fuchsia-400"></span>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8">
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Guides</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">API Ref</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Tutorials</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Community</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
    </nav>

    <!-- Search Bar (Desktop) -->
    <div class="hidden md:block relative">
      <input type="text" placeholder="Search the dataverse..." class="w-56 px-4 py-2 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-full border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
      <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lime-400 dark:text-fuchsia-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>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <label for="menu-toggle" class="cursor-pointer">
        <input type="checkbox" id="menu-toggle" class="hidden peer">
        <div class="space-y-2 group peer-checked:space-y-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 peer-checked:before:translate-y-2 peer-checked:after:-translate-y-2 transition-all duration-300">
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
        </div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-40 hidden peer-checked:block animate-fade-in-down">
        <!-- Mobile Navigation -->
        <nav class="absolute top-0 right-0 w-64 h-full bg-zinc-900 border-l border-lime-600/50 p-6 shadow-xl shadow-lime-600/30 overflow-y-auto transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-out dark:bg-black dark:border-fuchsia-600/50 dark:shadow-fuchsia-600/30">
          <div class="flex justify-end mb-8">
            <label for="menu-toggle" class="cursor-pointer text-lime-400 hover:text-lime-300 dark:text-fuchsia-400 dark:hover:text-fuchsia-300">
              <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="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </label>
          </div>
          <ul class="space-y-6">
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Guides</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>API Ref</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Tutorials</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Community</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <!-- Search Bar (Mobile) -->
              <div class="relative mt-8">
                <input type="text" placeholder="Search..." class="w-full px-4 py-3 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-lg border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 text-lime-400 dark:text-fuchsia-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>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

<style>
  /* Custom colors for better cyberpunk feel */
  .text-electric-blue-400 { color: #00e5ff; }
  .text-electric-blue-300 { color: #66efff; }
  .bg-electric-blue-500 { background-color: #00b8d4; }
  .text-hot-pink-400 { color: #ff007f; }
  .text-hot-pink-300 { color: #ff66b2; }
  .bg-hot-pink-500 { background-color: #e60073; }
  .text-lime-400 { color: #aeff00; }
  .text-lime-300 { color: #d0ff66; }
  .bg-lime-400 { background-color: #aeff00; }

  /* Keyframes for mobile menu animation */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Header Component

A complex, responsive header component for a multi-vendor marketplace, inspired by paper/print aesthetics with a jewel-tone color scheme. Includes search, navigation, user profile, and cart.

Open Preview

                <header class="bg-amber-50 dark:bg-stone-950 shadow-md border-b-2 border-stone-200 dark:border-amber-950 print-pattern relative z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo and Site Name -->
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-emerald-700 dark:text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.44 1.94l-1.42 1.42M20 10h-1m-1.94 6.44l-1.42-1.42M10 20v1m-6.44-1.94l1.42-1.42M3 10H2m1.94-6.44l1.42 1.42M15 9a3 3 0 11-6 0 3 3 0 016 0zm6 3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span class="ml-2 text-2xl font-serif font-black tracking-tighter text-emerald-800 dark:text-emerald-200">Marketplace</span>
        </a>
      </div>

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

      <!-- Right-side actions (Desktop/Tablet) -->
      <div class="hidden lg:flex items-center space-x-6">
        <nav class="flex space-x-6">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Shop</a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Sell</a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md rounded-lg text-sm font-medium font-serif transition-colors duration-200">Blog</a>
        </nav>
        <div class="relative">
          <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
            </svg>
            <span class="ml-1 text-sm font-medium font-serif">Cart</span>
            <span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
          </button>
        </div>
        <div class="relative">
          <button type="button" class="max-w-xs bg-stone-100 dark:bg-stone-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          </button>
          <!-- Dropdown menu (hidden by default) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div> -->
        </div>
      </div>

      <!-- Mobile Menu Button & Icons (Mobile/Tablet) -->
      <div class="flex items-center lg:hidden">
        <div class="mr-4">
          <button class="relative flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
            </svg>
            <span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
          </button>
        </div>
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 hover:bg-stone-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Search Bar (Mobile Only) -->
    <div class="mt-4 lg:hidden">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-stone-400 dark:text-stone-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
          </svg>
        </div>
        <input type="search" placeholder="Search for emeralds, rubies, and more..." class="block w-full pl-10 pr-3 py-2 border border-stone-300 dark:border-stone-700 rounded-lg leading-5 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-sans text-sm shadow-inner-paper dark:shadow-inner-paper-dark">
      </div>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <!--
  <div class="lg:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-emerald-50 dark:bg-stone-700 text-emerald-700 dark:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif" aria-current="page">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Sell</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Blog</a>
    </div>
    <div class="pt-4 pb-3 border-t border-stone-200 dark:border-stone-700 shadow-custom-paper dark:shadow-custom-paper-dark">
      <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/women/1.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-stone-900 dark:text-stone-100 font-serif">Jane Doe</div>
          <div class="text-sm font-medium leading-none text-stone-500 dark:text-stone-400 mt-1 font-sans">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Sign out</a>
      </div>
    </div>
  </div>
  -->

  <style>
    .print-pattern {
        background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23edece2" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    .dark .print-pattern {
        background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23332200" fill-opacity="0.3"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    .shadow-inner-paper {
      box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .dark .shadow-inner-paper-dark {
      box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    }

    .shadow-custom-paper {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .dark .shadow-custom-paper-dark {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    }

    /* Jewel Tones */
    .text-emerald-700 { color: #016E65; } .dark\:text-emerald-300 { color: #6EE7B7; }
    .text-emerald-800 { color: #005F55; } .dark\:text-emerald-200 { color: #A7F3D0; }
    .focus\:ring-emerald-500 { --tw-ring-color: #10B981; }
    .hover\:text-emerald-700 { color: #016E65; } .dark\:hover\:text-emerald-300 { color: #6EE7B7; }
    .bg-emerald-50 { background-color: #ECFDF5; } .dark\:bg-stone-700 { background-color: #44403C; }
    .bg-ruby-600 { background-color: #DC2626; } .dark\:bg-ruby-400 { background-color: #FB7185; }
  </style>
</header>

Header Component

A responsive header component for a music/audio platform, featuring a monospace/developer design aesthetic with earth tones and dark mode support.

Open Preview

                <header class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-md font-mono">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M3 19l6 3V6m0 0l6-3m-6 3v13M3 19V6l6-3m0 0L3 6m0 0v13m0-13l6-3m0 3v13m0-13l-6 3m0 0L3 6m0 0l6-3" />
      </svg>
      <span class="text-xl font-bold tracking-tight text-amber-700 dark:text-amber-300">TuneFlow</span>
    </a>

    <nav class="hidden md:flex space-x-8 text-lg">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Browse</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">My Music</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Radio</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Settings</a>
    </nav>

    <div class="flex items-center space-x-4">
      <div class="relative hidden md:block">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-stone-200 dark:bg-stone-800 text-stone-700 dark:text-stone-300 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-all duration-300 w-48 lg:w-64">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>

      <button class="md:hidden focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 rounded-md p-1">
        <svg class="h-7 w-7 text-stone-700 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-amber-600 dark:border-amber-400 cursor-pointer object-cover hidden md:block">
    </div>
  </div>
</header>

Neon_Glow_Header_Component

A responsive header component for SaaS applications with neon/glow effects and a candy/sweet color scheme, featuring dark mode support and interactive elements.

Open Preview

                <header class="bg-gradient-to-r from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 shadow-lg relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none"><div class="absolute inset-0 bg-white opacity-10 dark:opacity-5 blur-3xl"></div></div>
    <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
        <!-- Logo/Brand Name -->
        <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] glow-effect-logo"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M12 2L2 7l10 5 10-5-10-5z" />
                <path d="M2 17l10 5 10-5" />
                <path d="M2 12l10 5 10-5" />
            </svg>
            <span
                class="text-white font-extrabold text-2xl tracking-tight leading-none drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] group-hover:text-pink-500 transition-colors duration-300">
                Sweet<span
                    class="text-purple-700 drop-shadow-[0_0_8px_rgba(110,0,255,0.7)] dark:text-pink-400 dark:drop-shadow-[0_0_8px_rgba(255,100,200,0.7)]">SaaS</span>
            </span>
        </a>

        <!-- Desktop Navigation -->
        <nav class="hidden md:flex space-x-8 lg:space-x-12">
            <a href="#features"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#pricing"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#about"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#contact"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
        </nav>

        <!-- Action Buttons / User / Mobile Menu Toggle -->
        <div class="flex items-center space-x-4">
            <a href="#signin"
                class="hidden sm:block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                <span class="relative z-10">Sign In</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>
            <a href="#signup"
                class="hidden sm:block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                <span class="relative z-10">Sign Up</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>

            <!-- Mobile Menu Button -->
            <button class="md:hidden text-white focus:outline-none focus:ring-2 focus:ring-white rounded-md" aria-label="Toggle menu">
                <svg class="h-8 w-8 glow-effect-icon" 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 Menu (hidden by default, would be toggled with JS) -->
    <div class="md:hidden bg-gradient-to-b from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 py-4 px-4 shadow-inner relative z-0" style="display: none;">
        <nav class="flex flex-col space-y-4">
            <a href="#features"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#pricing"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#about"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#contact"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <div class="pt-4 flex flex-col space-y-3">
                <a href="#signin"
                    class="block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                    <span class="relative z-10">Sign In</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
                <a href="#signup"
                    class="block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                    <span class="relative z-10">Sign Up</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
            </div>
        </nav>
    </div>

    <!-- Custom CSS for glow effects - these would typically be in a separate CSS file or utility classes if more complex -->
    <style>
        .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
            transition: filter 0.3s ease-in-out;
        }

        .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
        }

        .glow-effect-underline {
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
            filter: blur(8px);
            transform: scale(1.5);
            transition: all 0.3s ease-out;
        }

        .group:hover .glow-effect-button-hover {
            opacity: 1;
            transform: scale(1);
        }

        .glow-effect-icon {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
            transition: filter 0.3s ease-in-out;
        }

        .glow-effect-icon:hover {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
        }

        /* Dark mode specific glows */
        .dark .glow-effect-underline {
            box-shadow: 0 0 8px rgba(173, 216, 230, 0.5); /* Lighter blue for dark mode glow */
        }

        .dark .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(173, 216, 230, 0.4) 0%, transparent 70%);
        }

        .dark .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(173, 216, 230, 0.7)); /* Lighter blue for dark mode glow */
        }

        .dark .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(173, 216, 230, 0.9));
        }
    </style>
</header>

E-commerce Header Component

A responsive, vibrant, Material Design-inspired header component for e-commerce websites, featuring navigation, search, and user actions. Supports dark mode.

Open Preview

                <header class="bg-gradient-to-r from-orange-500 to-red-600 dark:from-gray-900 dark:to-gray-800 shadow-lg relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-3 4m0 0l-3-4m3 4v-4m5 4l2 2m0 0l2 2m-2-2l-2 2m2-2l2-2M11 9L7 5m0 0L3 9m4-4l4 4" />
      </svg>
      <span class="text-white text-2xl font-bold tracking-tight hidden sm:block">ShopSwift</span>
    </a>

    <!-- Search Bar (Desktop) -->
    <div class="flex-grow mx-4 hidden md:block">
      <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-white focus:bg-white focus:text-gray-900 transition-all duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
    </div>

    <!-- User Actions & Mini-Cart -->
    <nav class="flex items-center space-x-4">
      <!-- Mobile Search Icon -->
      <button class="md:hidden p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200" aria-label="Search">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>

      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Favorites">
        <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">3</span>
      </a>
      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Shopping Cart">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">7</span>
      </a>
      <a href="#" class="p-1 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-200" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-8 w-8 rounded-full object-cover">
      </a>
    </nav>
  </div>

  <!-- Main Navigation (Desktop) -->
  <nav class="hidden md:block bg-gradient-to-r from-orange-600 to-red-700 dark:from-gray-800 dark:to-gray-700 py-2 shadow-inner">
    <div class="container mx-auto px-4 flex justify-center space-x-8 text-white font-medium">
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Categories</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Best Sellers</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Deals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Support</a>
    </div>
  </nav>
</header>

Header Component

A simple, responsive header component for social media, with dark mode support. It features a logo, a search bar, and user avatar. Uses a grayscale color scheme.

Open Preview

                <header class="bg-white dark:bg-gray-900 p-4 shadow-md">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo or Site Title -->
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>

    <!-- Search Bar -->
    <div class="flex-grow mx-4 max-w-xl">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
    </div>

    <!-- User Avatar/Menu -->
    <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-gray-300 dark:border-gray-600">
    </div>
  </div>
</header>

Retro Vintage Header Component

A responsive header component with a Retro/Vintage style tailored for a dashboard with dark theme support.

Open Preview

                <header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
            <h1 class="text-white text-3xl font-bold">My Dashboard</h1>
        </div>
        <nav class="space-x-4">
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
        </nav>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
    </div>
    <div class="mt-4 flex items-center space-x-3">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
            <span class="ml-2 text-white">John Doe</span>
        </div>
        <button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
    </div>
</header>

E-commerce Header Component

A responsive e-commerce header component built using Tailwind CSS with Material Design principles. Features a monochromatic color scheme (shades of blue), search functionality, navigation menu, shopping cart, and user profile. The header includes depth effects like shadows and supports dark mode. The component is fully responsive with a mobile hamburger menu.

Open Preview

                <!-- E-commerce Header with Material Design and Monochromatic Color Scheme -->
<header class="bg-blue-50 dark:bg-blue-900 shadow-md transition-colors duration-300">
  <!-- Top Bar with announcements -->
  <div class="bg-blue-600 dark:bg-blue-800 text-white py-2 px-4 text-center text-sm">
    <p>Free shipping on orders over $50 | Use code WELCOME10 for 10% off your first order</p>
  </div>

  <!-- Main Header -->
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-between py-4">
      <!-- Logo -->
      <div class="flex items-center mb-4 md:mb-0">
        <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-300">
          <span class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            ShopMate
          </span>
        </a>
      </div>
      
      <!-- Mobile Menu Button -->
      <div class="md:hidden mb-4 w-full flex justify-end">
        <button class="mobile-menu-button p-2 rounded-md hover:bg-blue-100 dark:hover:bg-blue-700 transition duration-150 focus:outline-none">
          <svg class="h-6 w-6 text-blue-700 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
      
      <!-- Search Bar -->
      <div class="w-full md:w-1/3 order-3 md:order-2 mb-4 md:mb-0">
        <div class="relative rounded-md shadow-sm">
          <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-md border border-blue-200 dark:border-blue-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-blue-800 dark:text-white transition-colors duration-300" />
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>
      
      <!-- Right Menu Items -->
      <div class="flex items-center space-x-5 order-2 md:order-3">
        <!-- Theme Toggle -->
        <button class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/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="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" />
          </svg>
        </button>
        
        <!-- Wishlist -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </a>
        
        <!-- Shopping Cart -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="absolute -top-2 -right-2 w-5 h-5 text-xs bg-blue-500 dark:bg-blue-400 text-white rounded-full flex items-center justify-center">3</span>
        </a>
        
        <!-- User Account -->
        <a href="#" class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile" class="w-8 h-8 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-sm" />
        </a>
      </div>
    </div>
    
    <!-- Navigation Menu -->
    <nav class="hidden md:block border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-wrap justify-center space-x-8">
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Women
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Men
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
    
    <!-- Mobile Navigation Menu (Hidden by default) -->
    <nav class="mobile-menu hidden md:hidden border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-col space-y-4 px-2">
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Women</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Men</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
  </div>
</header>