Modulo di accesso al neumorfismo
Un componente Modulo di accesso progettato con lo stile Neumorfismo, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
Componenti correlati
Componente Modulo di accesso
Un componente del modulo di accesso complesso e reattivo con microinterazioni e una combinazione di colori analoga, adatto per siti Web aziendali/aziendali. Supporta la modalità oscura e utilizza Tailwind CSS per lo stile.
Componente Modulo di accesso 3D
Un modulo di accesso reattivo con un design 3D, una combinazione di colori triadici e il supporto per il tema scuro. Adatto per le interfacce dei social media.
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.