Composants Composants d’authentification Skeuomorphic_Monochromatic_Auth_E-commerce

Skeuomorphic_Monochromatic_Auth_E-commerce

Un composant d’authentification complexe, skeuomorphe et monochromatique pour les applications de commerce électronique, doté de plusieurs éléments interactifs et d’un design réactif avec prise en charge du mode sombre. Il imite les interfaces du monde réel avec des commandes numériques.

Aperçu

HTML Code

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-zinc-900 dark:to-zinc-800 font-sans">
  <div class="w-full max-w-md mx-auto bg-gradient-to-br from-gray-100 to-gray-300 dark:from-zinc-700 dark:to-zinc-900 rounded-3xl shadow-xl border border-gray-300 dark:border-zinc-700 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-102">
    <div class="text-center mb-8">
      <svg class="mx-auto h-16 w-16 text-gray-700 dark:text-gray-300 mb-4" 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-sm">Welcome Back!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Manage your e-commerce experience.</p>
    </div>

    <div class="grid grid-cols-1 gap-6">
      <div class="relative">
        <input type="email" id="email" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="email" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Email Address
        </label>
      </div>
      <div class="relative">
        <input type="password" id="password" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="password" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Password
        </label>
      </div>
    </div>

    <div class="flex items-center justify-between text-sm mt-4">
      <div class="flex items-center">
        <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-zinc-700 bg-gray-200 dark:bg-zinc-800 text-gray-600 dark:text-gray-400 focus:ring-gray-500 dark:focus:ring-zinc-500 transition-colors duration-200">
        <label for="remember_me" class="ml-2 block text-gray-700 dark:text-gray-300">
          Remember me
        </label>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        Forgot Password?
      </a>
    </div>

    <button type="submit" class="w-full flex justify-center py-3 px-4 mt-8 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 dark:from-zinc-600 dark:to-zinc-800 text-white font-semibold shadow-lg hover:from-gray-700 hover:to-gray-900 dark:hover:from-zinc-700 dark:hover:to-zinc-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 dark:focus:ring-zinc-700 transition-all duration-200 transform active:scale-95 active:shadow-md">
      <svg class="h-5 w-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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
      Sign In
    </button>

    <div class="relative mt-8">
      <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300 dark:border-zinc-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-gray-100 dark:bg-zinc-700 text-gray-500 dark:text-gray-400 rounded-full shadow-inner">Or continue with</span>
      </div>
    </div>

    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.29 18.251c-.698-.59-.766-.884-.367-1.425.215-.29.414-.52.583-.715.169-.196.347-.384.53-.574.18-.182.34-.33.483-.448.14-.118.25-.22.33-.3.08-.08.15-.145.2-.18.05-.035.09-.06.12-.08.03-.02.05-.03.06-.04.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01 0-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01C9.697 10.999 10.5 10 10.5 10c.813-.813 1.62-.057 2.18-.124.717-.084 1.343-.223 1.95-.455.608-.232 1.139-.553 1.58-.934.44-.38.78-.79 1.015-1.22.232-.43.35-86.745-.35-1.35.3-.43.3-176.6-.7-227.1-.6-.28-.5-.81-.97-1.46-.47-.65-.89-1.26-1.26-1.83-.37-.57-.68-1.07-.93-1.49-.24-.42-.4-79-.19-.115-.115.115-.115 0 0 0 0 .115.115.115.172.172 0 0 0 0 .115-.115.115-.115 0 0 0 0 0-.115.115.115 0 0 0 0 0-.115.115.115 0-.115.115-.115c.67.67.67 1.34 0 2.01-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67.67-.671.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01C9.07 14.93 9.77 15.63 9.77 15.63c-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0zM10 18c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0-4c-.55 0-1-.45-1-.999S9.45 12 10 12s1 .45 1 1.001S10.55 14 10 14zm0-4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Facebook
      </button>
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M17 6H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zm0 4H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zM3 14h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1zm0 4h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1z"/>
          <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Google
      </button>
    </div>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Don't have an account?
      <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
        Sign Up
      </a>
    </p>

    <div class="mt-6 text-center text-xs text-gray-500 dark:text-gray-500">
      <p>Need help? Contact support at <a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">[email protected]</a></p>
    </div>
  </div>
</div>

Composants associés

Composant Composants d’authentification

Un composant d’authentification simple et réactif conçu selon les principes de Material Design, avec des tons de terre et la prise en charge du mode sombre. Convient pour un site de portefeuille.

Ouvrir

Composants d’authentification

Composant d’authentification réactif prenant en charge le mode sombre, utilisant Tailwind CSS avec des arrière-plans sombres, un formulaire de connexion et d’inscription et des images d’espace réservé aléatoires pour les éléments de l’interface utilisateur.

Ouvrir

Composants d’authentification

Un composant d’authentification minimaliste comprenant un formulaire de connexion et d’inscription avec prise en charge du thème sombre, un design réactif et des images de remplacement.

Ouvrir