Search Components

Header

Top section of the website, typically containing logo and navigation

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">jane.doe@example.com</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>

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>

Skeuomorphic Header Component

A simple and responsive header component designed for e-commerce websites with a skeuomorphic style, using a grayscale color scheme and supporting dark mode.

Open Preview

                <header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

Header Component

A responsive header component for a dashboard with microinteractions and vibrant colors, supporting dark theme.

Open Preview

                <header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
        <h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
        <button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
    </div>
</header>

Social Media Header Component

A complex, dark-mode responsive Header Component with a minimalist design and a complementary color scheme, designed for social media interfaces.

Open Preview

                <header class="bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <h1 class="text-2xl font-bold">SocialNet</h1>
      <nav class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Feed</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Notifications</a>
      </nav>
    </div>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute right-3 top-3 text-gray-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">
        <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 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
        <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
      </div>
    </div>
  </div>
  <div class="container mx-auto px-4 py-2 md:hidden bg-gray-200 dark:bg-gray-800">
    <nav class="flex justify-around text-sm">
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Feed</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Notifications</a>
    </nav>
  </div>
</header>