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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
<form>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" id="subscribe" class="mr-2 leading-tight">
<label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
</div>
<button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
</div>
</form>
<div class="mt-6 flex justify-center">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
</div>
<div class="mt-4 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
</div>
</div>Componentes relacionados
Skeuomorphic_Social_Media_Form_Complex
Un componente de formulario de redes sociales complejo y esqueuomórfico con colores complementarios, diseño responsivo y compatibilidad con modo oscuro. Imita las sensaciones y texturas de los botones del mundo real.
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.
Componente de formularios
Un componente de formularios complejo, receptivo y habilitado para temas oscuros para interfaces de redes sociales con un diseño monocromático en 3D. Utiliza Tailwind CSS con prefijos dark: para el modo oscuro e incluye elementos de formulario de ejemplo.