modulo di registrazione-ecommerce-tailwind
Componente del modulo di registrazione dal design piatto minimalista per l'e-commerce che utilizza Tailwind CSS con supporto per la modalità reattiva e scura, con una combinazione di colori blu-arancione complementare.
Codice HTML
<!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
<div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<div class="px-6 py-4">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
<input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
</div>
<button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
Register
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
</p>
</div>
</div>
</div>
Componenti correlati
Componente del modulo di registrazione
Un componente del modulo di registrazione semplice e reattivo con effetti neon/bagliore, combinazione di colori neutri freddi e supporto per la modalità scura, adatto per siti Web relativi alla fotografia.
Componente del modulo di registrazione
Un componente del modulo di registrazione complesso e reattivo per applicazioni finanziarie/bancarie, caratterizzato da un design pulito e minimalista con colori ad alto contrasto, tipografia forte e layout basato su griglia. Include il supporto per la modalità oscura.
Modulo di iscrizione Art Déco
Un componente del modulo di registrazione reattivo con un'estetica di design Art Déco, combinazione di colori ad alto contrasto e supporto per la modalità oscura, adatto per siti Web governativi o di servizio pubblico.