Componenti di autenticazione
Un componente di accesso e registrazione reattivo e interattivo progettato con microinterazioni, utilizzando colori complementari per un'interfaccia di contenuto del blog con supporto per temi scuri.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2 leading-tight">
<label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
</div>
<button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
</form>
<div class="mt-6 text-center">
<span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
</div>
</div>
</div>Componenti correlati
Componente Componenti di autenticazione
Un componente di autenticazione reattivo progettato per l'interfaccia utente in modalità oscura, con un modulo di accesso e iscrizione con stile CSS Tailwind.
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.
Componenti di autenticazione retrò vintage
Un complesso componente di autenticazione reattiva con un design retrò/vintage, adatto per una dashboard di visualizzazione e controllo dei dati. Presenta colori triadici ed elementi interattivi.