Componente Modulo di accesso
Componente modulo di accesso con design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
```html
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-lg w-96 transform transition duration-500 hover:scale-105">
<h2 tabindex="0" class="text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your password">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
Login
</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot Password?</a>
</div>
</div>
</div>
```Componenti correlati
Modulo di accesso Componente 37
Un componente del modulo di accesso reattivo progettato in stile Material Design con Tailwind CSS, che supporta la modalità oscura.
Componente Modulo di accesso
Un modulo di accesso ispirato al Bauhaus per i marchi di moda/bellezza, caratterizzato da colori ad alto contrasto, forme geometriche e reattività completa con supporto per la modalità scura.
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.