Search Components

All Components

Browse all available Tailwind CSS components

Cyberpunk Sepia Login/Signup Component

A complex, responsive login/signup component with cyberpunk-inspired neon aesthetics using sepia/brown tones, suitable for a forum or community platform. Includes dark mode support and interactive elements.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900 dark:bg-gray-950 font-mono relative overflow-hidden">

  <!-- Background Grid/Pattern -->
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
    <div class="absolute inset-0 bg-repeat bg-[size:16px_16px] animate-[pulse_10s_infinite] dark:animate-[pulse_15s_infinite]" style="background-image: linear-gradient(to right, #2a1b0c 1px, transparent 1px), linear-gradient(to bottom, #2a1b0c 1px, transparent 1px);"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(42,27,12,0.5)_0%,transparent_70%)]"></div>
  </div>

  <!-- Main Card Container -->
  <div class="relative z-10 w-full max-w-md mx-auto rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-[#2a1b0c] to-[#1a0f05] 
              dark:from-[#1a0f05] dark:to-black 
              border border-[#4a2e0e] dark:border-[#2a1b0c] 
              transform perspective-1000 rotateX-3 rotateY-1 
              animate-[glow_3s_infinite_alternate]">

    <!-- Cyberpunk Border Effect -->
    <div class="absolute inset-0 pointer-events-none rounded-xl" style="box-shadow: inset 0 0 15px rgba(255,165,0,0.3), 0 0 25px rgba(255,165,0,0.2) neon-glow-effect;"></div>
    <div class="absolute inset-0 rounded-xl border border-transparent animate-[borderPulse_5s_infinite] dark:animate-[borderPulse_7s_infinite]" style="background: linear-gradient(45deg, rgba(255,165,0,0.5) 0%, rgba(200,100,0,0.5) 50%, rgba(255,165,0,0.5) 100%) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;"></div>

    <div class="p-8 sm:p-10 relative z-20">
      <div class="text-center mb-8">
        <h1 class="text-4xl sm:text-5xl font-bold text-[#f7c58f] dark:text-[#ffd29e] mb-2 leading-tight tracking-wider flicker-text">
          ACCESS TERMINAL
        </h1>
        <p class="text-[#a07a53] dark:text-[#c4ae93] text-sm sm:text-base">Initiate Protocol Login / Registration</p>
      </div>

      <!-- Tab Navigation -->
      <div class="flex mb-8 border-b-2 border-[#4a2e0e] dark:border-[#2a1b0c]">
        <button id="login-tab" class="flex-1 py-3 text-lg font-semibold text-[#f7c58f] dark:text-[#ffd29e] 
                                     border-b-4 border-[#ffab4a] dark:border-[#ff9933] 
                                     hover:text-white dark:hover:text-white 
                                     transition-colors duration-300 
                                     tab-active"
                onclick="toggleTabs(this, 'login-form')">
          LOGIN
        </button>
        <button id="signup-tab" class="flex-1 py-3 text-lg font-semibold text-[#a07a53] dark:text-[#c4ae93] 
                                      border-b-4 border-transparent 
                                      hover:text-white dark:hover:text-white 
                                      transition-colors duration-300"
                onclick="toggleTabs(this, 'signup-form')">
          SIGNUP
        </button>
      </div>

      <!-- Login Form -->
      <form id="login-form" class="space-y-6 tab-content">
        <div>
          <label for="username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> USERNAME
          </label>
          <input type="text" id="username" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Enter your ID" aria-label="Username">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> PASSWORD
          </label>
          <input type="password" id="password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Access Key" aria-label="Password">
        </div>
        <div class="flex items-center justify-between text-sm">
          <a href="#" class="text-[#ffab4a] hover:underline transition-colors duration-300">Forgot Password?</a>
          <div class="flex items-center">
            <input type="checkbox" id="remember" class="hidden peer">
            <label for="remember" class="relative flex items-center cursor-pointer mr-2">
              <span class="w-5 h-5 border-2 border-[#ffab4a] dark:border-[#ff9933] rounded 
                           flex-shrink-0 mr-2 flex items-center justify-center 
                           peer-checked:bg-[#ffab4a] dark:peer-checked:bg-[#ff9933] 
                           peer-checked:border-[#ffab4a] dark:peer-checked:border-[#ff9933] 
                           transition-all duration-200">
                <svg class="w-3 h-3 text-[#3a2612] peer-checked:opacity-100 opacity-0 transition-opacity duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
              </span>
              <span class="text-white dark:text-[#ffd29e]">Remember Me</span>
            </label>


          </div>
        </div>
        <button type="submit" class="w-full py-3 rounded-md text-xl font-bold 
                                   bg-[#ffab4a] dark:bg-[#ff9933] 
                                   text-[#3a2612] dark:text-[#2a1b0c] 
                                   hover:bg-[#ffc58a] dark:hover:bg-[#ffb066] 
                                   transition-all duration-300 
                                   shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30 
                                   neon-button-effect">ENTER SYSTEM</button>
      </form>

      <!-- Signup Form (Hidden by default) -->
      <form id="signup-form" class="space-y-6 tab-content hidden">
        <div>
          <label for="new-username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> NEW USERNAME
          </label>
          <input type="text" id="new-username" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Designate your ID" aria-label="New Username">
        </div>
        <div>
          <label for="new-email" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> EMAIL ADDRESS
          </label>
          <input type="email" id="new-email" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Provide Matrix Coordinates" aria-label="Email Address">
        </div>
        <div>
          <label for="new-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> NEW PASSWORD
          </label>
          <input type="password" id="new-password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Set Access Key" aria-label="New Password">
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> CONFIRM PASSWORD
          </label>
          <input type="password" id="confirm-password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Re-enter Access Key" aria-label="Confirm Password">
        </div>
        <button type="submit" class="w-full py-3 rounded-md text-xl font-bold 
                                   bg-[#ffab4a] dark:bg-[#ff9933] 
                                   text-[#3a2612] dark:text-[#2a1b0c] 
                                   hover:bg-[#ffc58a] dark:hover:bg-[#ffb066] 
                                   transition-all duration-300 
                                   shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30 
                                   neon-button-effect">INITIATE REGISTRATION</button>
      </form>

      <p class="mt-8 text-center text-sm text-[#a07a53] dark:text-[#c4ae93]">
        <span class="text-[#ffab4a] mr-1">//</span> STATUS: ONLINE. SYSTEM READY FOR INTERACTION.
      </p>

      <!-- Futuristic Social Login Section -->
      <div class="mt-8 pt-6 border-t-2 border-[#4a2e0e] dark:border-[#2a1b0c] text-center">
        <p class="text-sm text-[#f7c58f] dark:text-[#ffd29e] mb-4">Or Connect Via Integrated Networks:</p>
        <div class="flex justify-center space-x-4">
          <button class="flex items-center justify-center p-3 rounded-md 
                         bg-[#3a2612] dark:bg-[#2a1b0c] 
                         text-[#ffab4a] dark:text-[#ff9933] 
                         border border-[#5a3b1a] dark:border-[#3a2612] 
                         hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612] 
                         hover:text-white dark:hover:text-white 
                         transition-colors duration-300 
                         shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
            <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H10.5V9h3.75v9zM12 6.75a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"></path>
            </svg>
            <span class="hidden sm:inline">Network_ID</span>
          </button>
          <button class="flex items-center justify-center p-3 rounded-md 
                         bg-[#3a2612] dark:bg-[#2a1b0c] 
                         text-[#ffab4a] dark:text-[#ff9933] 
                         border border-[#5a3b1a] dark:border-[#3a2612] 
                         hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612] 
                         hover:text-white dark:hover:text-white 
                         transition-colors duration-300 
                         shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
            <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M22.54 6.75H1.46C.66 6.75 0 7.41 0 8.21v7.58c0 .8.66 1.46 1.46 1.46h21.08c.8 0 1.46-.66 1.46-1.46V8.21c0-.8-.66-1.46-1.46-1.46zM8.88 15.69c-3.13 0-5.68-.38-5.68-.38S2.22 13.56 2.22 12s1.08-3.31 1.08-3.31c0 0 2.55-.38 5.68-.38 2.06 0 4.1.28 5.86.81 1.03.31 2.37.89 3.01 1.34 1.33.91 1.63 2.15 1.63 2.15s-.35 1.33-1.63 2.15c-.64.45-1.98 1.03-3.01 1.34-1.76.53-3.8.81-5.86.81z"></path>
            </svg>
            <span class="hidden sm:inline">Data_Stream</span>
          </button>
        </div>
      </div>

    </div>
  </div>

  <!-- Global Styles & JS for component functionality -->
  <style>
    @keyframes flicker-text {
      0%, 19.99%, 22%, 24%, 28%, 30%, 36%, 38% {
        opacity: 1;
        text-shadow: 0 0 7px #ffab4a, 0 0 10px #ffab4a, 0 0 15px #ffab4a;
      }
      20%, 21.99%, 24.01%, 27.99%, 30.01%, 35.99%, 38.01%, 100% {
        opacity: 0.9;
        text-shadow: none;
      }
    }

    .flicker-text {
      animation: flicker-text 3s infinite alternate;
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
      }
      50% {
        box-shadow: 0 0 15px rgba(255,165,0,0.6), 0 0 30px rgba(255,165,0,0.4);
      }
      100% {
        box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
      }
    }

    .shadow-inner-glow {
      box-shadow: inset 0 0 8px rgba(255,165,0,0.1);
    }
    
    .dark .shadow-inner-glow {
      box-shadow: inset 0 0 8px rgba(255,165,0,0.05);
    }

    .neon-button-effect {
      box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,165,0,0.2);
    }

    .dark .neon-button-effect {
      box-shadow: 0 0 10px rgba(255,153,51,0.4), 0 0 20px rgba(255,153,51,0.3), 0 0 30px rgba(255,153,51,0.2);
    }

    @keyframes borderPulse {
      0% {
        border-color: rgba(255,165,0,0.5);
      }
      50% {
        border-color: rgba(255,165,0,0.8);
      }
      100% {
        border-color: rgba(255,165,0,0.5);
      }
    }

    /* Tailwind utility for perspective transformation */
    .perspective-1000 {
      perspective: 1000px;
    }

    .rotateX-3 {
      transform: rotateX(3deg);
    }

    .rotateY-1 {
      transform: rotateY(1deg);
    }

    @keyframes pulse {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 100% 100%;
      }
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #0d0905;
        }
    }

  </style>

  <script>
    function toggleTabs(activeTab, formId) {
      // Deactivate all tabs and hide all forms
      document.querySelectorAll('.tab-active').forEach(tab => {
        tab.classList.remove('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
        tab.classList.add('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
      });
      document.querySelectorAll('.tab-content').forEach(form => {
        form.classList.add('hidden');
      });

      // Activate the clicked tab and show its corresponding form
      activeTab.classList.add('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
      activeTab.classList.remove('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
      document.getElementById(formId).classList.remove('hidden');
    }

    // Initial setup: activate login tab on load
    document.addEventListener('DOMContentLoaded', () => {
        const loginTab = document.getElementById('login-tab');
        if (loginTab) {
            toggleTabs(loginTab, 'login-form');
        }
    });
  </script>
</div>

Cyberpunk Login/Signup Form

A complex, responsive login/signup component with a cyberpunk aesthetic, featuring dark backgrounds, neon gradients, and interactive elements, designed for educational platforms.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-200 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-950 font-mono">
  <div class="relative w-full max-w-md mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 opacity-20 animate-pulse-slow dark:opacity-30"></div>
    <div class="absolute inset-0 border-2 rounded-xl border-transparent glow-border dark:border-transparent"></div>
    
    <div class="relative p-8 backdrop-blur-sm bg-gray-900/80 dark:bg-gray-950/80 rounded-xl">
      <h2 class="text-4xl font-bold mb-6 text-center tracking-wider neon-glow-text dark:neon-glow-text-darker transition-colors duration-300">
        <span id="form-title">ACCESS_NEURAL_NET</span>
      </h2>

      <div class="flex justify-center mb-6">
        <button id="login-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button active-tab-button">
          LOGIN
        </button>
        <button id="signup-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button">
          REGISTER
        </button>
      </div>

      <form id="login-form" class="space-y-6">
        <div>
          <label for="login-email" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="login-email" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="login-password" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="login-password" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 dark:focus:ring-red-400">
          INITIATE_CONNECTION
        </button>
        <p class="text-center text-sm text-gray-400 mt-4">
          <a href="#" class="text-purple-400 hover:underline transition-colors duration-300 neon-text-hover">FORGOT_ACCESS_CODE?</a>
        </p>
      </form>

      <form id="signup-form" class="space-y-6 hidden">
        <div>
          <label for="signup-username" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// USER_ALIAS</label>
          <input type="text" id="signup-username" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="cyber_nomad_77">
        </div>
        <div>
          <label for="signup-email" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="signup-email" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="signup-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="signup-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <div>
          <label for="signup-confirm-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// CONFIRM_ENCRYPTED_KEY</label>
          <input type="password" id="signup-confirm-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 dark:focus:ring-green-400">
          ESTABLISH_NEW_PROTOCOL
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-500 mb-4">// ALTERNATIVE_AUTHENTICATION_METHODS</p>
        <div class="flex justify-center space-x-4">
          <button class="p-3 rounded-full bg-gray-800 border border-blue-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-blue-400 dark:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H9.75v-6.75H7.5V9h2.25V7.5c0-2.25 1.5-3.75 4.125-3.75h3v2.25h-2.25c-.75 0-1.5.75-1.5 1.5V9h3.75l-.75 3h-3V18z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-red-700 hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-red-400 dark:text-red-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.012 21.036c-5.07-1.127-8.913-5.748-8.913-11.036V12.01c0-5.06 3.967-9.28 9.02-9.28 4.975 0 8.98 4.093 8.98 9.17 0 4.8-3.743 8.877-8.966 9.136-.02-.007-.04-.017-.063-.02l-.004-.002zm-5.086-13.064h9.946v1.921H6.92V7.972zm0 2.472h9.946V12.36H6.92v-1.916zm0 2.443h7.172v1.924H6.92v-1.924z"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-green-700 hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-green-400 dark:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1.75 18h-3.5A.75.75 0 019.5 17.25v-3.5H6.25a.75.75 0 01-.75-.75V9.5a.75.75 0 01.75-.75h3.5V5.25A.75.75 0 0110.25 4.5h3.5a.75.75 0 01.75.75v3.5h3.25a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.25v3.5a.75.75 0 01-.75.75z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Base cyberpunk styling for neon effects */
  .neon-glow-text {
    text-shadow: 0 0 5px #e11d48, 0 0 10px #e11d48, 0 0 20px #e11d48, 0 0 40px #a21238, 0 0 80px #a21238;
    color: #f7d7df; /* A light pink for text color */
  }

  .dark .neon-glow-text-darker {
    text-shadow: 0 0 5px #f43f5e, 0 0 10px #f43f5e, 0 0 20px #f43f5e, 0 0 40px #fda4af, 0 0 80px #fda4af;
    color: #fce7f3; /* A lighter pink in dark mode */
  }

  .neon-text-hover:hover {
    text-shadow: 0 0 3px #a78bfa, 0 0 6px #a78bfa, 0 0 10px #a78bfa;
    color: #c4b5fd; /* Light purple on hover */
  }

  /* Animated glowing border */
  .glow-border {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
    animation: glow-border-animation 6s infinite alternate;
  }

  @keyframes glow-border-animation {
    0% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
    25% { border-image-source: linear-gradient(to right, #ec4899, #ef4444, #8b5cf6); }
    50% { border-image-source: linear-gradient(to right, #ef4444, #8b5cf6, #ec4899); }
    75% { border-image-source: linear-gradient(to right, #8b5cf6, #ef4444, #ec4899); }
    100% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
  }

  /* Pulse glow for background */
  @keyframes pulse-slow {
    0% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.02); }
    100% { opacity: 0.2; transform: scale(1); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 10s infinite ease-in-out;
  }

  /* Button gradient and glow */
  .glowing-button {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    box-shadow: 0 0 10px #ec4899, 0 0 20px #8b5cf6;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .glowing-button:hover {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 15px #8b5cf6, 0 0 30px #ec4899;
  }

  /* Tab Button Styling */
  .tab-button {
    background: transparent;
    border: 2px solid transparent;
    color: #a78bfa; /* Default tab text color */
    position: relative;
    overflow: hidden;
  }

  .tab-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #a78bfa, #f472b6, #ef4444);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
  }

  .tab-button.active-tab-button {
    color: #fff; /* Active tab text color */
    text-shadow: 0 0 5px #a78bfa, 0 0 10px #a78bfa;
  }

  .tab-button.active-tab-button::before {
    width: 100%;
  }

  .tab-button:not(.active-tab-button):hover::before {
     width: 50%; /* Smaller underline on hover for inactive */
  }

  .tab-button:not(.active-tab-button):hover {
    color: #d1d5db; /* Lighter text on hover for inactive */
  }

  /* Dark mode specific adjustments for general elements */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-950 {
      background-color: #030712 !important;
    }
    .dark\:bg-gray-950\/80 {
      background-color: rgba(3, 7, 18, 0.8) !important;
    }
    .dark\:bg-gray-850 {
      background-color: #1f2937 !important;
    }
  }
</style>

<script>
  // This script is for demonstration and functional purposes of the component.
  // In a real application, you would integrate with a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const loginTab = document.getElementById('login-tab');
    const signupTab = document.getElementById('signup-tab');
    const loginForm = document.getElementById('login-form');
    const signupForm = document.getElementById('signup-form');
    const formTitle = document.getElementById('form-title');

    loginTab.addEventListener('click', () => {
      loginTab.classList.add('active-tab-button');
      signupTab.classList.remove('active-tab-button');
      loginForm.classList.remove('hidden');
      signupForm.classList.add('hidden');
      formTitle.textContent = 'ACCESS_NEURAL_NET';
    });

    signupTab.addEventListener('click', () => {
      signupTab.classList.add('active-tab-button');
      loginTab.classList.remove('active-tab-button');
      signupForm.classList.remove('hidden');
      loginForm.classList.add('hidden');
      formTitle.textContent = 'INITIATE_PROTOCOL';
    });
  });
</script>

Password Reset Component

A complex, responsive password reset component with a skeuomorphic design style, analogous color scheme (greens/blues), and dark mode support, suitable for cryptocurrency/blockchain applications.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full rounded-2xl shadow-xl p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-950 border border-green-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-green-100 before:to-blue-100 dark:before:from-gray-700 dark:before:to-gray-900 before:opacity-0 before:blur-sm before:transition-opacity before:duration-500
              hover:before:opacity-30">
    
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="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="%2338A169" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <svg class="w-16 h-16 text-green-600 dark:text-green-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-4 leading-tight drop-shadow-md tracking-wider">
        <span class="text-green-700 dark:text-green-500">Access</span> Recovery
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8 text-lg leading-relaxed">
        Securely restore your account access with advanced encryption. 
      </p>

      <form class="space-y-6">
        <div class="relative group">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Registered Email Address
          </label>
          <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-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a2.5 2.5 0 10-5 0V12"/>
              </svg>
            </div>
            <input type="email" id="email" name="email" autocomplete="email" required
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner 
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Enter the email associated with your account.</p>
        </div>

        <div class="relative group">
          <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Recovery Token (Optional)
          </label>
          <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-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5l-3 3H7a2 2 0 01-2-2V9a2 2 0 012-2h5a2 2 0 012 2z"/>
              </svg>
            </div>
            <input type="text" id="token" name="token" placeholder="e.g., 2FA code or backup key"
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            If you have a 2FA code or backup key, enter it here for faster recovery.
          </p>
        </div>

        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold
                       text-white bg-gradient-to-r from-green-500 to-blue-600
                       dark:from-green-600 dark:to-blue-700
                       hover:from-green-600 hover:to-blue-700 dark:hover:from-green-700 dark:hover:to-blue-800
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       group relative overflow-hidden neumorphic-button">
          <span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <span class="relative flex items-center justify-center">
            <svg class="-ml-1 mr-3 h-6 w-6 transform rotate-0 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"/>
            </svg>
            Initiate Recovery
          </span>
        </button>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300">Having trouble?</p>
        <a href="#" class="font-medium text-green-700 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300
                           transform transition-transform duration-200 hover:scale-[1.03] active:scale-95
                           block py-2 rounded-lg bg-green-50 dark:bg-gray-800 border border-green-200 dark:border-gray-700
                           shadow-sm hover:shadow-md">
          Contact Support for Manual Review
        </a>
      </div>

      <div class="mt-10 pt-6 border-t border-green-200 dark:border-gray-700 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400">
          Your security is our top priority. All recovery processes are encrypted.
        </p>
        <div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4">
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"></path></svg>
            Security First
          </span>
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-green-500 dark:text-green-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="M8 14v3m4-3v3m4-3v3M3 21h18a2 2 0 002-2V7a2 2 0 00-2-2H3a2 2 0 00-2 2v12a2 2 0 002 2zM10 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"></path></svg>
            Blockchain Integrated
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Base Skeuomorphism styles for neumorphic effect */
.neumorphic-input {
  box-shadow: inset 3px 3px 6px #bfcfe7, inset -3px -3px 6px #ffffff;
}
.dark .neumorphic-input {
  box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #4a5568;
}

.neumorphic-button {
  box-shadow: 6px 6px 12px #98d1d1, -6px -6px 12px #ffffff;
}
.dark .neumorphic-button {
  box-shadow: 6px 6px 12px #1e414f, -6px -6px 12px #324e60;
}

/* Add active state for button press effect */
.neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
              inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4),
              inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* Further styling for visual depth and subtle skeuomorphism */
.skeleton-label {
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.1);
}
.dark .skeleton-label {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4), -1px -1px 2px rgba(255,255,255,0.05);
}

/* Subtle text shadows for better readability on light/dark backgrounds */
h2, p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.dark h2, .dark p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
</style>

GamingNavigationComponent

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

Open Preview

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

    <!-- Mobile Menu Button -->
    <button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white dark:text-gray-200 hover:text-emerald-300 focus:text-emerald-300 transition-colors duration-300 ease-in-out" aria-label="Toggle navigation">
      <svg class="w-7 h-7 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

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

      <div class="flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-4 mt-4 lg:mt-0 w-full lg:w-auto">
        <!-- Search Bar (hidden on smaller mobile) -->
        <div class="relative hidden sm:block w-full lg:w-auto">
          <input type="text" placeholder="Search games..." class="w-full lg:w-48 xl:w-56 pl-10 pr-4 py-2 rounded-full bg-emerald-800 dark:bg-emerald-900 border border-emerald-600 dark:border-emerald-800 text-white dark:text-gray-200 placeholder-emerald-200 dark:placeholder-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:border-transparent transition-all duration-300 ease-in-out text-base shadow-inner">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-emerald-300 dark:text-emerald-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
          </svg>
        </div>

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

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

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

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

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

  @media (min-width: 1024px) {
    #mobile-menu {
      max-height: none !important; /* override max-height for large screens */
      opacity: 1 !important;
      display: flex !important;
      transform: scaleY(1) !important;
    }
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function () {
        menu.classList.toggle('hidden'); // Tailwind's 'hidden' class
        menu.classList.toggle('open'); // Custom class for max-height transition
        menu.classList.toggle('flex'); // Ensure flex display when open
        menu.classList.toggle('scale-y-0'); // ScaleY for transform transition
        menu.classList.toggle('scale-y-100');
      });

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

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

User Profiles Component

A simple, artistic user profile component designed for travel/tourism websites, featuring soft watercolor textures, a rainbow gradient color scheme, responsiveness, and dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-900 dark:to-slate-950 p-6 sm:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto overflow-hidden rounded-xl shadow-2xl relative bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700 opacity-60 dark:opacity-40 filter blur-xl animate-gradient-xy"></div>
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] opacity-10 dark:opacity-5"></div>

    <div class="relative p-6 sm:p-8 text-center">
      <!-- Profile Image -->
      <div class="w-28 h-28 mx-auto -mt-4 mb-4 rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-lg transform transition-transform duration-300 hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <!-- User Name -->
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-400 dark:via-pink-400 dark:to-red-400">
        Elara Vance
      </h2>

      <!-- User Title/Location -->
      <p class="text-base sm:text-lg font-medium mb-4 text-gray-600 dark:text-gray-300">
        Wanderlust Explorer | Paris, France
      </p>

      <!-- Short Bio/Quote -->
      <p class="text-sm italic mb-6 text-gray-700 dark:text-gray-400 leading-relaxed">
        "Collecting moments, not things. Always seeking the next adventure."
      </p>

      <!-- Stats/Badges Placeholder (Optional for simple design) -->
      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 text-white shadow-md transition-all duration-300 hover:scale-105">50+ Trips</span>
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-400 to-lime-400 text-white shadow-md transition-all duration-300 hover:scale-105">Pro Photographer</span>
      </div>

      <!-- Call to Action / Button -->
      <button class="w-full py-3 px-6 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-teal-500 to-blue-600 
                     hover:from-teal-600 hover:to-blue-700 
                     dark:from-teal-600 dark:to-blue-700 
                     dark:hover:from-teal-700 dark:hover:to-blue-800 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 
                     focus:ring-blue-300 dark:focus:ring-blue-800">
        View Travel Journal
      </button>
    </div>
  </div>

  <style>
    @keyframes gradient-xy {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }

    .animate-gradient-xy {
      background-size: 400% 400%;
      animation: gradient-xy 15s ease infinite;
    }
  </style>
</div>

Playful Autumn Error Component

A playful and cheerful error message component designed with autumn colors, rounded aesthetics, and dark mode support, suitable for documentation or wiki sites.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto rounded-3xl shadow-xl overflow-hidden p-6 sm:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-700 dark:to-gray-900 border-4 border-orange-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex flex-col items-center justify-center text-center">
      <div class="bg-red-500 dark:bg-red-600 rounded-full p-4 mb-6 shadow-lg">
        <svg class="h-16 w-16 text-white stroke-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight drop-shadow-sm">Oopsie Daisy!</h2>
      <p class="text-lg text-orange-700 dark:text-gray-300 leading-relaxed mb-6">
        Looks like our digital squirrels chewed through some wires. We can't find what you're looking for!
      </p>
      <div class="space-y-4 w-full">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 border-2 border-red-400 dark:border-red-500 rounded-full shadow-lg text-lg font-semibold text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" 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 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
          Go Back
        </a>
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 border-2 border-orange-400 dark:border-orange-500 rounded-full shadow-md text-lg font-semibold text-orange-800 dark:text-orange-200 bg-orange-200 dark:bg-gray-800 hover:bg-orange-300 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6-11h.01"></path></svg>
          Back to Homepage
        </a>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Jewel_Tone_Rating_System_Simple

A simple, responsive rating system component with a skeuomorphic design, jewel tone color scheme, and dark mode support, suitable for non-profit/charity websites.

Open Preview

                <div class="flex items-center justify-center p-4 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-800 dark:to-teal-900 border-4 border-emerald-400 dark:border-emerald-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden group">
    
    <!-- Background Glow Effect (Skeuomorphic Detail) -->
    <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-rose-500 to-purple-600 opacity-0 blur-md group-hover:opacity-30 transition-opacity duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center space-y-6">
      <h2 class="text-3xl font-extrabold text-white text-shadow tracking-tight text-center">
        Rate Our Impact
      </h2>
      <p class="text-sm text-emerald-100/90 text-center mb-4 leading-relaxed max-w-xs">
        Your feedback helps us grow and serve our community better.
      </p>

      <div class="flex space-x-2 sm:space-x-4">
        <!-- Star 1 -->
        <button aria-label="1 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
           <!-- Inner Shadow (Skeuomorphic Detail) -->
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 2 -->
        <button aria-label="2 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 3 -->
        <button aria-label="3 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 4 -->
        <button aria-label="4 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 5 -->
        <button aria-label="5 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>
      </div>

      <button class="mt-6 w-full py-3 px-6 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800
                     text-white font-bold rounded-xl shadow-lg
                     transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 focus:ring-opacity-75
                     active:from-pink-600 active:to-purple-700 dark:active:from-pink-800 dark:active:to-purple-900 border-2 border-pink-400 dark:border-pink-600
                     text-shadow-sm">
        Submit Rating
      </button>
    </div>
    
    <!-- Subtle outer glow effect (skeuomorphic detail) -->
    <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:bottom-0 transition-all duration-500"></div>
    <div class="absolute -top-2 -right-2 w-16 h-16 bg-cyan-300 dark:bg-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:top-0 transition-all duration-500"></div>
  </div>
</div>

<style>
  /* Custom text-shadow for skeuomorphism */
  .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 
                 -1px -1px 2px rgba(255, 255, 255, 0.2);
  }
  .dark .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  }
  .dark .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5);
  }
</style>

Luxury_Vibrant_Travel_Navigation

A complex, luxury, and vibrant navigation component designed for travel and tourism websites, featuring sophisticated typography, high-saturation colors, and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 shadow-xl dark:from-purple-900 dark:via-pink-800 dark:to-orange-700 transition-colors duration-500 ease-in-out">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-white font-serif text-3xl font-extrabold tracking-wider animate-pulse transition-transform duration-300 hover:scale-105
        bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-sky-300 to-lime-300 inline-block py-1 rounded-lg px-2
        dark:from-yellow-200 dark:via-sky-200 dark:to-lime-200">
        LUXVoyage
      </a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-yellow-300 transition-colors duration-300 relative group">
        Destinations
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-sky-300 transition-colors duration-300 relative group">
        Packages
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-sky-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-lime-300 transition-colors duration-300 relative group">
        Experiences
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-lime-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-orange-300 transition-colors duration-300 relative group">
        About Us
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-orange-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm w-36 lg:w-48">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <button class="flex items-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 transition-all duration-300 ease-in-out
        shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300 select-none">
        <span class="font-medium hidden lg:inline">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>

       <button id="dark-mode-toggle" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>

    <div class="md:hidden flex items-center">
      <button id="mobile-menu-button" class="p-2 text-white hover:text-yellow-300 focus:outline-none focus:text-yellow-300 transition-colors duration-300" aria-label="Open mobile menu">
        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
          <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) -->
  <div id="mobile-menu" class="hidden md:hidden pb-4">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Destinations
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Packages
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Experiences
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        About Us
      </a>
      <div class="relative w-full px-4 mt-2">
        <input type="text" placeholder="Search..." class="w-full py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm">
        <svg class="absolute right-7 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="flex items-center justify-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 mt-2 w-full mx-4 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300">
        <span class="font-medium">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button id="dark-mode-toggle-mobile" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300 mt-2" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

<script>
  // JavaScript for mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });

  // JavaScript for dark mode toggle
  function toggleDarkMode() {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    } else {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }
  }

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

  document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
  document.getElementById('dark-mode-toggle-mobile').addEventListener('click', toggleDarkMode);
</script>

Industrial_Food_Search_Box

A responsive and high-contrast industrial-style search box component for food/restaurant websites, featuring exposed elements, dark mode support, and moderate complexity.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-max flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b-2 border-gray-200 dark:border-gray-700">
      <div class="flex-shrink-0 text-gray-700 dark:text-gray-300 mr-0 sm:mr-4 mb-2 sm:mb-0">
        <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <div class="flex-grow w-full">
        <label for="search-food" class="sr-only">Search for food or restaurants</label>
        <input id="search-food" type="text" placeholder=" cravings... pizza, sushi, burgers, pasta" class="w-full p-3 text-base sm:text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-mono tracking-wide" aria-label="Search for food or restaurants">
      </div>
      <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-850 flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" 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>
        Search
      </button>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-700">
      <!-- Category 1 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1080/60/60" alt="Pizza" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Pizza</span>
      </div>
      <!-- Category 2 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1054/60/60" alt="Sushi" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Sushi</span>
      </div>
      <!-- Category 3 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/111/60/60" alt="Burgers" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Burgers</span>
      </div>
      <!-- Category 4 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1084/60/60" alt="Desserts" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Desserts</span>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-850 border-t-2 border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-3 sm:mb-0">
        Explore popular cuisines or filter by location.
      </div>
      <button class="flex items-center px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm font-semibold rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
        </svg>
        Advanced Filters
      </button>
    </div>
  </div>
</div>

E-commerce Breadcrumb Navigation - Paper/Print Inspired Purple

A simple, responsive breadcrumb navigation component designed for e-commerce, featuring a paper/print-inspired aesthetic with a purple/violet color scheme. Includes dark mode support.

Open Preview

                <nav class='bg-white dark:bg-gray-800 p-4 shadow-md sm:rounded-lg border border-gray-200 dark:border-gray-700 font-sans' aria-label='Breadcrumb'>
  <ol class='flex flex-wrap items-center space-x-2 sm:space-x-4'>
    <li>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Home
      </a>
    </li>
    <li class='flex items-center'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
      </svg>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Category
      </a>
    </li>
    <li class='flex items-center'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
      </svg>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Subcategory
      </a>
    </li>
    <li class='flex items-center' aria-current='page'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
      </svg>
      <span class='text-gray-500 dark:text-gray-400 text-sm sm:text-base font-semibold whitespace-nowrap'>Current Product Page</span>
    </li>
  </ol>
</nav>

1 ... 108 109 110 111 112 ... 335

Search Components

Categories

All Components