Componente Modulo di accesso
Un componente del modulo di accesso reattivo con glassmorphism, con elementi traslucidi con effetti di sfocatura e supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="mr-2 leading-tight">
<span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
</div>
<a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
</div>
<div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
</div>
</div>Componenti correlati
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.
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 minimalista progettato con una combinazione di colori triadica adatta per la presentazione del portfolio con supporto per la modalità oscura.