Modulo di accesso retrò
Un componente del modulo di accesso in stile retrò/vintage con effetti reattivi e supporto per temi scuri, progettato utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
<div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
<input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">
<a href="#" class="hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-4">
<img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
<span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
</div>
</div>
</div>Componenti correlati
Componente Modulo di accesso
Componente modulo di accesso con design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Brutalist_Login_Form_Travel_Tourism
Un modulo di accesso di media complessità, in stile brutalista con colori vivaci, progettato per siti Web di viaggi e turismo. Presenta un contrasto elevato, una tipografia audace e una reattività completa con il supporto della modalità scura.
Componente Modulo di accesso
Un componente del modulo di accesso reattivo con supporto per la modalità scura, utilizzando colori pastello, adatto per siti Web di notizie/giornalismo. Garantisce una riduzione dell'affaticamento degli occhi con la sua interfaccia utente scura.