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
Componente Modulo di accesso
Un componente del modulo di accesso scheumorfico progettato con colori vivaci e complessità moderata, adatto per un portfolio.
Componente Modulo di accesso
Un modulo di accesso reattivo e complesso con un design minimalista/piatto adatto a un blog o a un sito di contenuti. Presenta una combinazione di colori monocromatici, supporto per temi scuri e più elementi interattivi, implementati esclusivamente con HTML e Tailwind CSS.
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.