Componente de formularios minimalistas
Un componente de formulario minimalista diseñado para carteras, con una combinación de colores pastel, un diseño sencillo, un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-6">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Get in Touch</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
<textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white"></textarea>
</div>
<button type="submit" class="w-full bg-blue-400 dark:bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-500 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-200">Send Message</button>
</form>
</div>
</div>Componentes relacionados
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.
Forma industrial brutalista en escala de grises
Un componente de forma complejo, de estilo brutalista, con un esquema de color en escala de grises, diseñado para aplicaciones industriales y de fabricación. Cuenta con elementos de alto contraste, diseños inusuales y capacidad de respuesta total con soporte para modo oscuro.
Componente de formas de vidrio
Componente de formularios de Glassmorphism con tonos tierra, diseño responsivo y soporte de tema oscuro para un sitio web de blog/contenido.