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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 md:p-12">
<div class="container mx-auto">
<div class="flex flex-col lg:flex-row bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Form Section -->
<div class="lg:w-1/2 p-8 lg:p-12">
<h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Contact Us</h2>
<form>
<div class="mb-6">
<label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Name">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Email">
</div>
<div class="mb-6">
<label for="subject" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Subject</label>
<input type="text" id="subject" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Subject of your message">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Message</label>
<textarea id="message" rows="6" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Message"></textarea>
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Send Message
</button>
</div>
</form>
</div>
<!-- Image/Content Section (Analogous Color Scheme Example) -->
<div class="lg:w-1/2 bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 p-8 lg:p-12 flex items-center justify-center">
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-4">Get in Touch</h3>
<p class="text-white text-opacity-90 mb-6">We'd love to hear from you! Fill out the form to get in touch with our team.</p>
<!-- Example of complex elements: Icons and contact info -->
<div class="text-white text-opacity-90">
<div class="flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.242-4.243m2.828 2.828l1.414-1.414m-5.656-5.656l1.414-1.414m6.364 6.364l-1.414 1.414m-7.071-7.071l1.414-1.414M3.432 7.393c-2.102 2.101-2.102 5.514 0 7.615a5.656 5.656 0 008.012 0l-4.243-4.242a1.997 1.997 0 010-2.828l4.243-4.242a5.656 5.656 0 00-8.012 0z"/>
</svg>
<p>123 Main Street, Anytown, USA</p>
</div>
<div class="flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-7 13a9 9 0 110-18 9 9 0 010 18z"/>
</svg>
<p>[email protected]</p>
</div>
<div class="flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
<p>+1 234 567 890</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composante des formes brutalistes
Un composant de formulaires conçu avec une esthétique brutaliste, utilisant des couleurs pastel, et adapté aux sites Web d’entreprise. Il dispose d’un design réactif avec prise en charge des thèmes sombres.
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
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.