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.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
<textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
</div>
</form>
<div class="mt-6 flex items-center">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
</div>
</div>Composants associés
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.
Formulaire de demande d’emploi ludique
Un composant de formulaire de candidature réactif et ludique avec des couleurs neutres chaudes, des éléments arrondis et une prise en charge du mode sombre, adapté aux sites d’emploi et aux plateformes de développement de carrière.
Composant Retro Vintage Forms
Un composant de formulaires complexe conçu dans un style rétro/vintage avec une palette de couleurs pastel, adapté aux sites Web d’entreprise professionnels et réactif avec prise en charge du mode sombre.