Componente Retro Vintage Forms
Un componente de formularios complejos diseñado en un estilo retro / vintage con una combinación de colores pastel, adecuado para sitios web comerciales profesionales y receptivo con soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de formas brutalistas
Un componente de formularios web diseñado con un estilo brutalista con alto contraste y diseños inusuales, adecuado para el comercio electrónico y responsivo con soporte para temas oscuros.
Componente de formas neumórficas
Un componente de formularios simple con diseño de neumorfismo, adaptado para aplicaciones de comercio electrónico, con un esquema de color monocromático y compatibilidad con el modo oscuro.
Componente de formas brutalistas
Un componente de formularios diseñado con una estética brutalista, utilizando colores pastel, y adecuado para sitios web de negocios/corporativos. Cuenta con un diseño responsivo con soporte para temas oscuros.