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 Formes Rétro/Vintage
Un composant de formulaires doté d’une esthétique rétro/vintage inspirée des années 80 et 90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Formulaires
Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Composant de formulaire de médias sociaux avec conception 3D et couleurs vives
Un composant de formulaire de réseau social complexe, réactif et dynamique inspiré de la 3D avec prise en charge du thème sombre.