Componente Modulo di accesso
Un componente del modulo di accesso reattivo progettato con lo stile Glassmorphism, che incorpora effetti di vetro smerigliato, effetti di sfocatura e supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">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="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
<div class="flex justify-around mt-4">
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
</div>
</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.
Modulo di accesso al neumorfismo
Un componente Modulo di accesso progettato con lo stile Neumorfismo, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Componente Modulo di accesso
Un modulo di accesso semplice e reattivo progettato con uno stile scheumorfico che imita gli elementi del mondo reale utilizzando una combinazione di colori vivaci. È adatto per le interfacce dei social media e supporta la modalità oscura.