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
Modulo di accesso al neumorfismo
Un componente del modulo di accesso in stile neumorfismo per una dashboard, caratterizzato da un design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Componente Modulo di accesso
Modulo di accesso scheumorfico per i social media con colori pastello, reattivo e supporto per la modalità scura. Il modulo presenta un sottile effetto 3D su input e pulsanti, imitando gli elementi fisici. Ombre e sfumature vengono utilizzate per migliorare la sensazione di scheumorfo. Gli input hanno un'ombra morbida e i pulsanti hanno un aspetto rialzato e cliccabile. La combinazione di colori pastello passa senza problemi a una versione più scura e tenue in modalità scura, mantenendo la leggibilità e il comfort visivo. Il design reattivo garantisce l'usabilità su tutti i dispositivi.
Componente Modulo di accesso
Un componente del modulo di accesso scheumorfico progettato con colori vivaci e complessità moderata, adatto per un portfolio.