Componente de formularios
Un componente de formularios responsivo diseñado en estilo minimalista, adecuado para interfaces de redes sociales, con colores vibrantes, compatibilidad con modo oscuro e interacciones complejas.
Código HTML
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-vibrant-600 dark:text-vibrant-400 text-center">Join Our Community</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" placeholder="Your Name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" placeholder="Your Email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" placeholder="Your Password" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
<input type="file" class="mt-1 block w-full mb-4 text-sm text-gray-500 dark:text-gray-400 dark:bg-gray-600" accept="image/*">
<img src="https://picsum.photos/200" alt="Profile Preview" class="w-full h-32 object-cover rounded-lg mb-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bio</label>
<textarea placeholder="Tell us about yourself" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" rows="4" required></textarea>
</div>
<button type="submit" class="w-full py-2 px-4 mt-4 text-white bg-vibrant-600 rounded-md hover:bg-vibrant-700 focus:outline-none focus:ring-2 focus:ring-vibrant-500 dark:bg-vibrant-500 dark:hover:bg-vibrant-600">Submit</button>
</form>
<p class="text-center text-sm text-gray-500 dark:text-gray-400">Already have an account? <a href="#" class="text-vibrant-600 dark:text-vibrant-400 hover:underline">Log in</a></p>
</div>
</div>Componentes relacionados
Neumorphic_Fashion_Form
Un componente de forma neumórfica complejo, sensible y con un esquema de color apagado/desaturado, diseñado para marcas de moda y belleza, con múltiples elementos interactivos y compatibilidad con el modo oscuro.
Healthcare_Form_Gradient_Neon
Un componente de formulario de atención médica complejo y receptivo con degradados de color neón/eléctricos y transiciones suaves, compatible con el modo oscuro. Diseñado para aplicaciones médicas con múltiples elementos interactivos.
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.