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.
Código HTML
<div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
<form class="space-y-4">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
<input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
<img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
</div>
<button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
</form>
<p class="mt-4 text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
</p>
</div>Componentes relacionados
Componente de formas brutalistas
Un componente de formularios diseñado con una estética brutalista, utilizando colores pastel, y adecuado para sitios web de negocios/corporativos. Cuenta con un diseño responsivo con soporte para temas oscuros.
Componente de formularios
Un componente de formulario simple y minimalista diseñado con los principios de la tipografía suiza/internacional, utilizando un esquema de color apagado adecuado para sitios de documentación o wiki. Es totalmente sensible y es compatible con el modo oscuro.
Componente de formas brutalistas
Un simple componente de formas de estilo brutalista para las redes sociales. Cuenta con un diseño crudo de alto contraste con colores en escala de grises y responde con soporte para modo oscuro.