Componente Modulo di accesso
Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-40 backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out">
<label class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Login</button>
</form>
<p class="mt-6 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Sign up</a></p>
</div>
</div>Componenti correlati
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 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.
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.