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.
Código HTML
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
<div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
<h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
</div>
<div class="mb-4">
<label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
</div>
<div class="mb-6">
<label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
</div>
<button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
Send Message
</button>
</form>
</div>
</div>Componentes relacionados
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 formularios
Componente de formularios con estilo de cristal, combinación de colores vibrantes y complejidad simple para cartera. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS. Sin JavaScript.
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.