Cerca componenti

Categorie

Componenti Componenti di autenticazione

Componenti di autenticazione

Componenti relativi all'autenticazione e alla sicurezza degli utenti

Bauhaus Incontri Autenticazione

Un componente di autenticazione di complessità moderata per piattaforme di appuntamenti/social, caratterizzato da un design ispirato al Bauhaus con una combinazione di colori analoga. È reattivo e include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Main Container -->
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 max-w-sm w-full transform transition-all duration-300 ease-in-out hover:scale-105 border-4 border-yellow-400 dark:border-red-600">
    
    <!-- Header -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-red-500 rounded-full mx-auto flex items-center justify-center mb-4 text-white text-3xl font-bold dark:bg-red-700 transform rotate-45">
        <span class="transform -rotate-45">❤️</span>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 tracking-wide">
        MatchPoint
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400">
        Find your perfect connection.
      </p>
    </div>

    <!-- Tabs for Login/Signup -->
    <div class="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
      <button class="flex-1 py-3 px-4 text-center text-md font-semibold rounded-md transition-colors duration-200 ease-in-out bg-yellow-400 text-gray-900 dark:bg-yellow-600 dark:text-white">
        Login
      </button>
      <button class="flex-1 py-3 px-4 text-center text-md font-medium text-gray-700 dark:text-gray-300 rounded-md transition-colors duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600">
        Sign Up
      </button>
    </div>

    <!-- Form Area -->
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Email Address
        </label>
        <input id="email" name="email" type="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Password
        </label>
        <input id="password" name="password" type="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-red-500 focus:ring-red-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white
                       bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                       dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-red-700 transition-colors duration-200 transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <!-- Separator -->
    <div class="mt-8 relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400">
          Or continue with
        </span>
      </div>
    </div>

    <!-- Social Login Buttons -->
    <div class="mt-6 grid grid-cols-2 gap-3">
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500
                       dark:bg-yellow-800 dark:border-yellow-700 dark:text-white dark:hover:bg-yellow-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 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 18H11.5v-6H10v-2.25h1.5V8.5c0-1.298.591-2.022 2.05-2.022h2.25v2.25h-1.5c-.3 0-.75.075-.75.75v1.072h2.25l-.3 2.25h-1.95V18z" />
          </svg>
          Facebook
        </button>
      </div>
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                       dark:bg-blue-800 dark:border-blue-700 dark:text-white dark:hover:bg-blue-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24h21.35c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0zM7.5 20.5H4V9h3.5v11.5zM5.75 7.5a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zm14 13H17V14c0-1.85-.82-2.93-2.16-2.93C13.56 11.07 13 12.06 13 13.5v7H9.5V9h3.5v1.5c.57-.96 1.48-1.52 2.7-1.52C17.26 9 18 10.3 18 13.2V20.5h2.5V13.2c0-3.26-2.12-4.7-4.9-4.7-2.3 0-3.9 1.25-4.13 2.1z" />
          </svg>
          LinkedIn
        </button>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Monochromatic_Auth_E-commercio

Un componente di autenticazione complesso, scheumorfico e monocromatico per applicazioni di e-commerce, dotato di più elementi interattivi e design reattivo con supporto per la modalità oscura. Imita le interfacce del mondo reale con i controlli digitali.

Aperto Anteprima

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

Authentication_Components_Component

Un componente di autenticazione semplice e reattivo per i social media con microinterazioni, combinazione di colori complementari e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md transform transition duration-500 hover:scale-105">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-8">Join the Fun!</h2>

    <div class="space-y-6">
      <div>
        <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Email address">
      </div>

      <div>
        <label for="password" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Password">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Forgot your password?</a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
          Sign In
        </button>
      </div>
    </div>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">Or sign in with</p>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Facebook">
          <i class="fab fa-facebook-f text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Google">
          <i class="fab fa-google text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-400 hover:bg-blue-500 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Twitter">
          <i class="fab fa-twitter text-xl"></i>
        </button>
      </div>
      <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Sign Up</a>
      </p>
    </div>
  </div>
</div>

<!-- Font Awesome for social icons (optional - only if you want the icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Componente Componenti di autenticazione

Un componente di autenticazione semplice e reattivo progettato secondo i principi del Material Design, con toni della terra e supporto per la modalità oscura. Adatto per un sito portfolio.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>

Componente di autenticazione skeuomorfa

Componente di autenticazione scheumorfica con combinazione di colori triadica, complessità moderata, design reattivo e supporto per la modalità scura. Progettato per uno scopo di portfolio. Utilizza Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Welcome Back!
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
        Please sign in to your account
      </p>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <input type="hidden" name="remember" value="true">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Lock icon - replace with your preferred icon library/svg -->
            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm2-2a3 3 0 116 0v2H7V7zm6 5a1 1 0 100 2h-3a1 1 0 100-2h3z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

MinimalistaAuthForm

Un componente del modulo di accesso reattivo e minimalista progettato per portafogli o applicazioni web. Presenta un'estetica dal design piatto con una combinazione di colori complementari: il blu viene utilizzato per gli elementi interattivi in modalità luce e l'arancione viene utilizzato in modalità scura. Il modulo include campi per e-mail e password, un'opzione "ricordami", un link "password dimenticata", un'opzione per registrarsi e l'integrazione dell'accesso social (ad esempio, GitHub). Supporta il tema scuro ed è costruito esclusivamente con HTML e Tailwind CSS per una facile integrazione.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
  <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
    <div class="text-center mb-6 sm:mb-8">
      <!-- Optional: Logo (example using picsum.photos) -->
      <!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Sign In
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Welcome back! Please enter your details.
      </p>
    </div>

    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
        <input type="email" name="email" id="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div>
        <div class="flex items-center justify-between mb-1">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
              Forgot password?
            </a>
          </div>
        </div>
        <input type="password" name="password" id="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div class="flex items-center">
        <input id="remember-me" name="remember-me" type="checkbox"
                class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Not a member?
      <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
        Create an account
      </a>
    </p>
    
    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
                <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                    Or continue with
                </span>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-3">
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
                    </svg>
                    Sign in with GitHub
                </a>
            </div>
            <!-- Example for Google Icon (you would need the SVG) -->
            <!-- 
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
                    Sign in with Google
                </a>
            </div>
            -->
        </div>
    </div>

  </div>
</div>

Componente Componenti di autenticazione

Componente di autenticazione per l'e-commerce con design 3D, combinazione di colori triadica, interazioni complesse, supporto per modalità reattiva e oscura.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-xl">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
      Create your account
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 transform perspective-1000 rotateX-10">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-300">
            Or continue with
          </span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-3 gap-3">
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.01 c0 4.41 2.866 8.165 6.839 9.488.599.11.819-.26.819-.58v-1.9c-2.77.6-3.338-1.37-3.338-1.37-.454-1.156-1.11-1.464-1.11-1.464-.906-.619.069-.607.069-.607 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.116-4.555-4.93 0-1.09.39-1.984 1.024-2.675-.102-.253-.446-1.266.098-2.652 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0110 4.815c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.386.202 2.398.1 2.652.635.691 1.024 1.585 1.024 2.675 0 3.822-2.339 4.675-4.569 4.92.359.306.675.91.675 1.838v2.734c0 .32-.21.694-.825.578C17.103 18.163 20 14.407 20 10.01A9.996 9.996 0 0010 0z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <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.878v-6.987h-2.54V10h2.54V7.71c0-2.51 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <div class="mt-6">
        <form action="#" method="POST" class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
              Email address
            </label>
            <div class="mt-1">
              <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
              Password
            </label>
            <div class="mt-1">
              <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </div>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
                Remember me
              </label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Componente di autenticazione dello scheumorfismo

Componente di autenticazione dello scheumorfismo con combinazione di colori analoga e layout complesso per scopi di blog/contenuti, supporto per temi reattivi e scuri.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-10 font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-3xl p-10 max-w-md w-full transform transition duration-500 hover:scale-105 border-8 border-gray-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <svg class="w-20 h-20 mx-auto text-gray-600 dark:text-gray-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="M12 11c0 3.517-1.045 6.705-3 9.5m0-9.5a5 5 0 115 5v4.5M12 11C9.49 14.49 8 17.5 8 21m4-10a5 5 0 015 5v4.5m-16-.5h16m-7 0h.01"></path></svg>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white mt-4">Welcome Back!</h1>
      <p class="text-gray-500 dark:text-gray-400 mt-2">Sign in to continue to your account.</p>
    </div>

    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your email">
      </div>

      <div class="mb-8">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Password</label>
        <input type="password" id="password" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your password">
      </div>

      <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
          <input id="remember_me" type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 dark:text-yellow-500 rounded border-gray-300 dark:border-gray-600 transition duration-150 ease-in-out">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <a href="#" class="text-sm text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-4 px-6 rounded-2xl focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 shadow-lg shadow-yellow-300/50 dark:shadow-lg dark:shadow-yellow-700/50">
        Sign In
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out font-bold">Sign Up</a>
    </div>
  </div>
</div>

Componente Componenti di autenticazione

Un componente web in stile Brutalismo per l'autenticazione dei social media si interfaccia con una combinazione di colori pastello e un contrasto elevato per la modalità scura.

Aperto Anteprima

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
                </div>
            </div>
            <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
        </form>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
        </div>
        <div class="flex justify-between items-center">
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
            <span class="text-gray-600 dark:text-gray-300">or</span>
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
        </div>
        <div class="flex justify-center space-x-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
            </a>
        </div>
    </div>
</div>

Componenti di autenticazione

Un semplice componente di autenticazione per siti Web aziendali e aziendali che utilizza Material Design e una combinazione di colori complementare con Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form class="mt-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="********">
            </div>
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-md shadow hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>