Componente del formulario de registro
Un formulario de registro minimalista con un esquema de color en escala de grises y elementos interactivos ricos, responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
<div class="flex items-center justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
</div>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input class="mr-2 leading-tight" type="checkbox" required>
<span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
</label>
</div>
<div class="flex items-center justify-center">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</div>
</form>
</div>Componentes relacionados
Componente del formulario de registro
Un formulario de registro simple y receptivo para un mercado con un estilo de diseño industrial, una combinación de colores cálidos y neutros y compatibilidad con el modo oscuro.
Componente del formulario de registro
Un componente de formulario de registro receptivo con un esquema de color industrial pero dulce, adecuado para organizaciones sin fines de lucro / benéficas, con elementos expuestos y estética utilitaria.
Componente de formulario de registro - Tema de música/audio
Un componente de formulario de registro limpio y minimalista con un estilo de tipografía suizo/internacional y una combinación de colores otoñales, diseñado para plataformas de música/audio. Es totalmente responsivo, admite el modo oscuro y utiliza HTML semántico.