Componenti di autenticazione
Un componente di autenticazione reattivo con supporto per la modalità scura, utilizzando Tailwind CSS con sfondi scuri, un modulo di accesso e iscrizione e immagini segnaposto casuali per gli elementi dell'interfaccia utente.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="w-full max-w-sm">
<div class="mb-6 text-center">
<h1 class="text-2xl font-bold">Authentication</h1>
<p class="text-gray-400">Please sign in or create an account</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<form>
<div class="mb-4">
<label for="email" class="block mb-2 text-sm font-medium">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="password" class="block mb-2 text-sm font-medium">Password</label>
<input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="flex items-center justify-between mb-6">
<div>
<input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="remember" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-400">or</p>
<button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
</div>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
<p class="text-gray-400 text-sm">Random User Avatar</p>
</div>
</div>
</div>Componenti correlati
Componente di autenticazione di lusso
Un componente di autenticazione elegante e sofisticato progettato per i marchi di moda e bellezza di lusso, caratterizzato da un'interfaccia ricca, layout reattivo e supporto per la modalità scura utilizzando una combinazione di colori analoga.
Componente di autenticazione
Componente di autenticazione in stile neumorfismo per l'e-commerce, con una combinazione di colori triadica e un layout semplice. Supporta la modalità oscura ed è reattivo. Utilizza Tailwind CSS. Niente JavaScript.
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.