Composant Formulaires
Un composant de forme épuré et minimaliste conçu selon les principes de la typographie suisse/internationale, avec une palette de couleurs aux tons de bijou. Idéal pour les sites de conseil ou de services professionnels, offrant une réactivité totale et un support en mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
<div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
Get in Touch
</h2>
<p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
We'd love to hear from you. Please fill out the form below.
</p>
<form>
<div class="mb-5">
<label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
FULL NAME
</label>
<input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
</div>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
EMAIL ADDRESS
</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
</div>
<div class="mb-6">
<label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
YOUR MESSAGE
</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
</div>
<div class="mt-6">
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
SUBMIT
</button>
</div>
</form>
</div>
</div>Composants associés
Minimaliste Jewel Tone Forme du gouvernement
Un composant de formulaire réactif et minimaliste pour les sites Web gouvernementaux ou de service public, avec des tons de bijou et la prise en charge du mode sombre. Il comprend des champs pour les informations personnelles, les coordonnées et un message.
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.
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.