Composant Formulaires de conception matérielle
Un composant de formulaires réactifs conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300">Avatar</label>
<img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
</form>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1E1E2F;
}
}
</style>Composants associés
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 Formulaires 3D
Un composant de formulaires simple et réactif avec des éléments de conception 3D et des couleurs pastel pour les interfaces de médias sociaux, prenant en charge le mode sombre.
Composante des formes brutalistes
Un composant de formulaires Web conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles, adapté au commerce électronique et réactif avec la prise en charge du thème sombre.