Componente de Formas Retro/Vintage
Un componente de formularios con una estética retro/vintage inspirada en los años 80 y 90, con un diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<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>Componentes relacionados
Componente de formularios
Un componente de formularios responsivo diseñado en el estilo Material Design utilizando Tailwind CSS, con diseños de cuadrícula, sombras y soporte para 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.
Componente de formularios
Un componente de formularios responsivo diseñado en estilo minimalista, adecuado para interfaces de redes sociales, con colores vibrantes, compatibilidad con modo oscuro e interacciones complejas.