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
Composant Retro Vintage Forms
Un composant de formulaires complexe conçu dans un style rétro/vintage avec une palette de couleurs pastel, adapté aux sites Web d’entreprise professionnels et réactif avec prise en charge du mode sombre.
Minimaliste Jewel Tone Forme du gouvernement
Un composant de formulaire réactif et minimaliste pour les sites Web gouvernementaux ou de service public, avec des tons de bijou et la prise en charge du mode sombre. Il comprend des champs pour les informations personnelles, les coordonnées et un message.
Brutalism_Music_Audio_Form
Une forme complexe, de style brutaliste, pour les plates-formes musicales/audio avec une palette de couleurs bonbon/doux, avec plusieurs types d’entrée, la prise en charge du mode sombre et une réactivité totale.