Composant Formulaires
Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-vibrant-600 dark:text-vibrant-400 text-center">Join Our Community</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" placeholder="Your Name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" placeholder="Your Email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" placeholder="Your Password" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
<input type="file" class="mt-1 block w-full mb-4 text-sm text-gray-500 dark:text-gray-400 dark:bg-gray-600" accept="image/*">
<img src="https://picsum.photos/200" alt="Profile Preview" class="w-full h-32 object-cover rounded-lg mb-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bio</label>
<textarea placeholder="Tell us about yourself" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" rows="4" required></textarea>
</div>
<button type="submit" class="w-full py-2 px-4 mt-4 text-white bg-vibrant-600 rounded-md hover:bg-vibrant-700 focus:outline-none focus:ring-2 focus:ring-vibrant-500 dark:bg-vibrant-500 dark:hover:bg-vibrant-600">Submit</button>
</form>
<p class="text-center text-sm text-gray-500 dark:text-gray-400">Already have an account? <a href="#" class="text-vibrant-600 dark:text-vibrant-400 hover:underline">Log in</a></p>
</div>
</div>Composants associés
Formulaire de soins de santé biologique/inspiré de la nature
Un composant de formulaire simple et réactif avec un design naturel et fluide, une palette de couleurs bleues d’entreprise et une prise en charge du mode sombre, adapté aux applications médicales et de santé.
JobApplicationForm_WatercolorArtistic
Un formulaire de candidature complexe et réactif avec un style aquarelle/design artistique et une palette de couleurs arc-en-ciel dégradée. Comprend des sections pour les détails personnels, l’expérience, l’éducation et les téléchargements de fichiers, avec prise en charge du mode sombre, adaptées aux sites d’emploi et aux plateformes de carrière.
Composant Formes neumorphes
Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.