Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de connexion/inscription Cyberpunk Sepia

Un composant de connexion/inscription complexe et réactif avec une esthétique néon inspirée du cyberpunk utilisant des tons sépia/bruns, adapté à un forum ou à une plate-forme communautaire. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <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>

Formulaire de connexion/inscription Cyberpunk

Un composant de connexion/inscription complexe et réactif à l’esthétique cyberpunk, avec des arrière-plans sombres, des dégradés de néons et des éléments interactifs, conçu pour les plateformes éducatives.

Ouvrir Aperçu

                <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>

Composant de réinitialisation de mot de passe

Un composant complexe et réactif de réinitialisation de mot de passe avec un style de conception skeuomorphe, une palette de couleurs analogue (verts/bleus) et une prise en charge du mode sombre, adapté aux applications de crypto-monnaie/blockchain.

Ouvrir Aperçu

                <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

Une barre de navigation supérieure complexe et réactive pour les sites Web de jeux, inspirée des thèmes organiques/naturels avec une palette de couleurs analogue. Comprend un logo, des liens de navigation, un avatar de l’utilisateur et des boutons d’appel à l’action, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <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>

Composant Profils utilisateur

Un composant de profil utilisateur simple et artistique conçu pour les sites Web de voyage/tourisme, avec des textures aquarelle douces, une palette de couleurs dégradée arc-en-ciel, une réactivité et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant d’erreur d’automne ludique

Un composant de message d’erreur ludique et joyeux conçu avec des couleurs d’automne, une esthétique arrondie et une prise en charge du mode sombre, adapté à la documentation ou aux sites wiki.

Ouvrir Aperçu

                <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

Un composant de système d’évaluation simple et réactif avec un design skeuomorphe, une palette de couleurs de bijou et une prise en charge du mode sombre, adapté aux sites Web à but non lucratif/caritatifs.

Ouvrir Aperçu

                <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

Un composant de navigation complexe, luxueux et dynamique conçu pour les sites Web de voyage et de tourisme, avec une typographie sophistiquée, des couleurs à haute saturation et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de champ de recherche de style industriel réactif et à contraste élevé pour les sites Web d’alimentation/restaurant, avec des éléments exposés, une prise en charge du mode sombre et une complexité modérée.

Ouvrir Aperçu

                <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 - Imprimé Inspiré Violet

Un composant de navigation simple et réactif conçu pour le commerce électronique, avec une esthétique inspirée du papier/de l’impression avec une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Rechercher des composants

Catégories

Tous les composants