Componente de formularios
Un componente de forma limpio y minimalista diseñado con los principios de la tipografía suiza/internacional, con una combinación de colores en tono joya. Ideal para sitios web de consultoría o servicios profesionales, que ofrece una capacidad de respuesta completa y soporte en modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
<div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
Get in Touch
</h2>
<p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
We'd love to hear from you. Please fill out the form below.
</p>
<form>
<div class="mb-5">
<label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
FULL NAME
</label>
<input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
</div>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
EMAIL ADDRESS
</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
</div>
<div class="mb-6">
<label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
YOUR MESSAGE
</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
</div>
<div class="mt-6">
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
SUBMIT
</button>
</div>
</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.
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 de formularios
Componente de formularios receptivo con diseño 3D, combinación de colores análoga, diseño simple para comercio electrónico con soporte de tema oscuro