Composant Formes Rétro/Vintage
Un composant de formulaires doté d’une esthétique rétro/vintage inspirée des années 80 et 90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" 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-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your name" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" 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-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" 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-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="4" placeholder="Your message..." required></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none" accept="image/*" />
</div>
<div class="mb-6">
<img src="https://picsum.photos/200/300" alt="Random Placeholder" class="rounded-md w-full mb-2" />
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-indigo-600 text-white font-bold py-2 px-4 rounded-full hover:bg-indigo-700 focus:outline-none focus:shadow-outline">Submit</button>
</div>
</form>
<p class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">© 2023 Nostalgic Designs. All rights reserved.</p>
</div>Composants associés
Composant Formulaires
Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode 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.
Composant Formes neumorphes
Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.