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
Modulo di iscrizione
Un elegante componente del modulo di registrazione in modalità oscura che utilizza Tailwind CSS, con campi per le informazioni sull'utente e un design reattivo.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con un design glassmorphism, una combinazione di colori in scala di grigi e un supporto per temi scuri, adatto per siti Web aziendali/aziendali.
Modulo di registrazione del neumorfismo
Componente del modulo di registrazione del neumorfismo con supporto per il tema scuro utilizzando Tailwind CSS