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.
Codice HTML
<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 correlati
Componente Componenti di autenticazione
Componente di autenticazione con modalità oscura, effetti reattivi e nessuna dipendenza da JavaScript.
Componenti di autenticazione
Un componente di autenticazione complesso e reattivo con un design brutale con un tema scuro, adatto per applicazioni di social media.
Componenti di autenticazione
Un componente di autenticazione reattivo progettato nell'interfaccia utente in modalità scura, con moduli di accesso e iscrizione con immagini segnaposto.