Componente del formulario de registro
Un formulario de registro de diseño plano minimalista con efectos responsivos y soporte para temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
<form class="mt-6">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
<input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
<div class="mt-1 flex justify-center">
<img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
</div>
<p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
</form>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
</div>
</div>Componentes relacionados
Componente del formulario de registro
Un componente de formulario de registro interactivo con un estilo de glassmorphism, combinación de colores en tonos tierra y compatibilidad con temas oscuros. Diseñado para plataformas de redes sociales, con un diseño simple y elementos mínimos. Utiliza Tailwind CSS para aplicar estilo e incluye marcadores de posición de imagen de ejemplo.
Componente del formulario de registro
Un formulario de registro responsivo con diseño de neumorfismo, combinación de colores análoga y compatibilidad con modo oscuro, construido con Tailwind CSS para fines de redes sociales.
Componente del formulario de registro
Un componente de formulario de registro responsivo diseñado con un estilo skeuomórfico, utilizando un esquema de color monocromático y adaptado a las experiencias de comercio electrónico. Es compatible con el modo oscuro e incluye funciones de entrada interactivas para el registro de usuarios.