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.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" 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 type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
</p>
</div>
</div>Componenti correlati
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 - Modalità Oscura Vibrante
Un componente per modulo di accesso complesso e reattivo progettato per uso aziendale/aziendale con una combinazione di colori vivaci e il supporto completo della modalità scura, con l'obiettivo di ridurre l'affaticamento degli occhi.
Componente Modulo di accesso
Un componente del modulo di accesso progettato in 3D con una combinazione di colori triadica, adatto per l'e-commerce, con supporto per temi scuri e reattività, costruito con Tailwind CSS.