Componente Modulo di accesso
Un componente del modulo di accesso reattivo con design ispirato al Bauhaus, combinazione di colori neutri caldi e supporto per la modalità scura, adatto per applicazioni finanziarie e bancarie.
Codice HTML
<div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900 font-sans">
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 sm:scale-100 md:scale-95 lg:scale-90">
<div class="px-8 py-6 bg-stone-200 dark:bg-stone-700 relative">
<div class="absolute top-0 left-0 w-8 h-8 md:w-12 md:h-12 bg-amber-400"></div>
<div class="absolute bottom-0 right-0 w-8 h-8 md:w-12 md:h-12 bg-red-400"></div>
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 text-center relative z-10 py-4">Login to Your Account</h2>
</div>
<form class="p-8 space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
</div>
<div>
<label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
<input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
</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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded dark:bg-stone-700">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 transition-colors duration-200">
Sign in
</button>
</div>
</form>
<div class="px-8 py-6 bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-400">
Don't have an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Sign up</a>
</div>
</div>
</div>Componenti correlati
Componente Modulo di accesso
Un componente del modulo di accesso progettato in 3D con una combinazione di colori triadica, adatto per l'e-commerce, con supporto per temi scuri e reattività, costruito con Tailwind CSS.
Componente Modulo di accesso
Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.
Modulo di accesso Brutalist
Un semplice componente per moduli di accesso in stile brutalista progettato per applicazioni tecnologiche/SaaS, caratterizzato da contrasto elevato, tipografia audace e una combinazione di colori analoga con reattività completa e supporto per la modalità scura.