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 reattivo progettato con i principi di Material Design e stilizzato utilizzando Tailwind CSS. Presenta una combinazione di colori dei toni della Terra e un layout semplice adatto a un blog o a una piattaforma di consumo di contenuti, con supporto per temi scuri.
Modulo di accesso Skeuomorphic
Un componente del modulo di accesso scheumorfico con una combinazione di colori in scala di grigi e una complessità complessa, progettato per un sito Web di portfolio. È reattivo e supporta il tema scuro.
Componente Modulo di accesso
Un componente Modulo di accesso semplice e reattivo realizzato con una tavolozza di colori pastello (rosa tenui e grigi complementari) e microinterazioni coinvolgenti, come transizioni fluide e sottili effetti di hover/focus. Progettato per siti Web aziendali o aziendali, presenta un layout pulito, è completamente reattivo e include un supporto completo per il tema scuro. Costruito esclusivamente con HTML e Tailwind CSS.