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
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.
Gaming_Material_Form
Une forme réactive sur le thème du jeu inspirée des principes de conception matérielle, avec des couleurs triadiques, des effets de profondeur et la prise en charge du mode sombre. Convient pour la connexion, l’inscription ou les paramètres de jeu.
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.