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.
HTML Code
<div class="bg-pastel-light dark:bg-pastel-dark p-8 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Contact Us</h2>
<form>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="name">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name" />
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email" />
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="message">Message</label>
<textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Message" rows="4"></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="service">Service Inquiry</label>
<select id="service" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline">
<option value="consulting">Consulting</option>
<option value="design">Design</option>
<option value="development">Development</option>
</select>
</div>
<div class="mb-6 flex items-center justify-between">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400" />
<span class="ml-2 text-gray-600 dark:text-gray-400 text-sm">Subscribe to our newsletter</span>
</label>
</div>
<div class="flex items-center justify-center">
<button type="submit" class="bg-pastel-primary dark:bg-pastel-secondary hover:bg-pastel-secondary dark:hover:bg-pastel-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Send
</button>
</div>
</form>
<div class="mt-6 text-center">
<img src="https://picsum.photos/seed/picsum/200/100" alt="Random Image" class="rounded-lg" />
</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.
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.
Composante des formes brutalistes
Un simple composant de formes de style brutaliste pour les médias sociaux. Il présente un design brut à contraste élevé utilisant des couleurs en niveaux de gris et est réactif avec la prise en charge du mode sombre.