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
Composant Formulaires
Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.
Neumorphic_Fashion_Form
Un composant de forme neumorphe complexe, réactif et avec une palette de couleurs sourdes/désaturées, conçu pour les marques de mode et de beauté, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
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.