Componenti Modulo di accesso Componente Modulo di accesso

Componente Modulo di accesso

Un componente Modulo di accesso semplice e reattivo realizzato con una tavolozza di colori pastello (rosa tenui e grigi complementari) e microinterazioni coinvolgenti, come transizioni fluide e sottili effetti di hover/focus. Progettato per siti Web aziendali o aziendali, presenta un layout pulito, è completamente reattivo e include un supporto completo per il tema scuro. Costruito esclusivamente con HTML e Tailwind CSS.

Anteprima

Codice HTML

<div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
  <div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
    <h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
      Welcome Back
    </h2>
    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-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 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-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 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="••••••••"
        />
      </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-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
          <label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
            Remember me
          </label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
            Forgot password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
        >
          Sign In
        </button>
      </div>
    </form>
    <p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
      Not a member?
      <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
        Sign up now
      </a>
    </p>
  </div>
</div>

Componenti correlati

Brutalist_Login_Form_Travel_Tourism

Un modulo di accesso di media complessità, in stile brutalista con colori vivaci, progettato per siti Web di viaggi e turismo. Presenta un contrasto elevato, una tipografia audace e una reattività completa con il supporto della modalità scura.

Aperto