Componente Formularios de diseño de materiales
Un componente de formularios responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para el modo oscuro.
Código HTML
<div class="container mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300">Avatar</label>
<img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
</form>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1E1E2F;
}
}
</style>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 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.
Componente de formularios 3D
Un componente de formularios simple y receptivo con elementos de diseño 3D y colores pastel para interfaces de redes sociales, compatible con el modo oscuro.