formulaire-d-inscription-ecommerce-tailwind
Composant de formulaire d’inscription minimaliste pour le commerce électronique à l’aide de Tailwind CSS avec prise en charge du mode réactif et sombre, avec une palette de couleurs bleu-orange complémentaire.
HTML Code
<!-- 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>Composants associés
Formulaire d’inscription pour brutalisme
Formulaire d’inscription Composant avec un design brutaliste, une palette de couleurs triadique et une complexité simple, adapté à un tableau de bord. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un style glassmorphism, une palette de couleurs de terre et une prise en charge du thème sombre. Conçu pour les plateformes de médias sociaux, avec une mise en page simple et des éléments minimaux. Utilise Tailwind CSS pour le style et inclut des exemples d’espaces réservés d’image.
Composant du formulaire d’inscription
Un formulaire d’inscription simple avec un design pastel 3D, réactif et avec prise en charge du mode sombre. Convient pour un blog ou un site de consommation de contenu.