Composant Formulaires
Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
<form>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" id="subscribe" class="mr-2 leading-tight">
<label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
</div>
<button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
</div>
</form>
<div class="mt-6 flex justify-center">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
</div>
<div class="mt-4 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
</div>
</div>Composants associés
Composant Formulaires
Un composant de formulaire complexe et réactif avec prise en charge du thème sombre pour les sites Web de blog/contenu, conçu dans un style minimaliste/plat à l’aide d’une palette de couleurs analogue.
Composant Formes Minimalistes
Un composant de formulaire minimaliste conçu pour les portfolios, avec une palette de couleurs pastel, une mise en page simple, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.