Componente Componenti di autenticazione
Un componente di autenticazione in modalità oscura reattivo per i cruscotti, che utilizza i toni della terra per un'estetica naturale.
Codice HTML
<div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
<div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
<form>
<div class="mb-4">
<label class="block text-sm mb-2" for="email">Email</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-sm mb-2" for="password">Password</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
</div>
<button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
</form>
<p class="mt-4 text-sm text-center">
<a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-6">
<span class="w-1/4 border-b border-gray-600"></span>
<span class="mx-2 text-gray-400">or</span>
<span class="w-1/4 border-b border-gray-600"></span>
</div>
<button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Sign in with Google
</button>
</div>
</div>Componenti correlati
Componenti di autenticazione
Un componente di autenticazione reattivo progettato nell'interfaccia utente in modalità scura, con moduli di accesso e iscrizione con immagini segnaposto.
Auth_Component_Dating_Neon_Artistic
Un componente di autenticazione semplice e artistico con una combinazione di colori neon/elettrico, progettato per piattaforme di appuntamenti/social, caratterizzato da un'estetica ad acquerello morbido e piena reattività con supporto per la modalità oscura.
MinimalistaAuthForm
Un componente del modulo di accesso reattivo e minimalista progettato per portafogli o applicazioni web. Presenta un'estetica dal design piatto con una combinazione di colori complementari: il blu viene utilizzato per gli elementi interattivi in modalità luce e l'arancione viene utilizzato in modalità scura. Il modulo include campi per e-mail e password, un'opzione "ricordami", un link "password dimenticata", un'opzione per registrarsi e l'integrazione dell'accesso social (ad esempio, GitHub). Supporta il tema scuro ed è costruito esclusivamente con HTML e Tailwind CSS per una facile integrazione.