Componenti di autenticazione
Un componente di autenticazione reattivo progettato nell'interfaccia utente in modalità scura, con moduli di accesso e iscrizione con immagini segnaposto.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="name">Name</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email-signup">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password-signup">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
</div>
</div>
</div>Componenti correlati
Componenti di autenticazione
Un componente di autenticazione complesso e reattivo con un design brutale con un tema scuro, adatto per applicazioni di social media.
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 Componenti di autenticazione
Un componente di autenticazione complesso progettato per applicazioni industriali/manifatturiere, caratterizzato da un'estetica monospace/sviluppatore con tonalità di colore oceano/blu. Include moduli di accesso, registrazione e reimpostazione della password, completamente reattivo con supporto della modalità oscura.