Composant Formulaires
Un composant de forme simple et minimaliste conçu selon les principes de la typographie suisse/internationale, utilisant une palette de couleurs sourdes adaptée à la documentation ou aux sites wiki. Il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-xl mx-auto bg-white dark:bg-gray-850 shadow-md rounded-lg overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">We'd love to hear from you. Please fill out the form below.</p>
</div>
<form class="px-6 py-6 space-y-5">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<div class="mt-1">
<input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required placeholder="[email protected]" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
</div>
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
<div class="mt-1">
<input type="text" name="subject" id="subject" placeholder="Inquiry about a topic" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Message</label>
<div class="mt-1">
<textarea id="message" name="message" rows="5" placeholder="Type your message here..." class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"></textarea>
</div>
</div>
<div class="pt-2">
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900">
Send Message
</button>
</div>
</form>
</div>
</div>Composants associés
Formulaire de médias sociaux brutaliste
Un composant de forme simple et brutaliste pour les médias sociaux avec une palette de couleurs triadique et une prise en charge du thème sombre.
Skeuomorphic_Social_Media_Form_Complex
Un composant de formulaire de réseau social complexe et skeuomorphe avec des couleurs complémentaires, un design réactif et une prise en charge du mode sombre. Imite les sensations et les textures des boutons du monde réel.
Photography_Contact_Form
Un formulaire de contact épuré et minimaliste pour les portfolios de photographie, inspiré de la typographie suisse/internationale, avec une palette de couleurs rétro/vintage discrète. Entièrement réactif avec prise en charge du mode sombre.