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
Formulario de inscripción
Un elegante componente de formulario de registro en modo oscuro que utiliza Tailwind CSS, con campos para información del usuario y diseño responsivo.
Formulario de registro de neumorfismo
Componente de formulario de registro de neumorfismo con soporte de tema oscuro usando Tailwind CSS
Componente del formulario de registro
Un componente de formulario de registro responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.