Composant du formulaire d’inscription
Un formulaire d’inscription minimaliste avec une palette de couleurs en niveaux de gris et des éléments interactifs riches, réactif et incluant la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
<div class="flex items-center justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
</div>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input class="mr-2 leading-tight" type="checkbox" required>
<span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
</label>
</div>
<div class="flex items-center justify-center">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</div>
</form>
</div>Composants associés
Formulaire d’inscription Art Déco
Un composant de formulaire d’inscription réactif avec une esthétique Art déco, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux sites Web gouvernementaux ou de services publics.
Retro_Charity_Registration_Form
Un composant de formulaire d’inscription simple et réactif avec une esthétique rétro/vintage sépia/marron des années 80/90, conçu à des fins à but non lucratif/caritatif, y compris la prise en charge du mode sombre.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription minimaliste et réactif conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des espaces propres avec un minimum d’éléments.