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 Componenti di autenticazione
Un componente di autenticazione reattivo con supporto per il tema scuro, eseguito in stile Skeuomorphism.
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.
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.