Componente del formulario de registro
Un componente de formulario de registro receptivo diseñado en un estilo brutalista con un esquema de color pastel y adecuado para sitios web comerciales / corporativos. Cuenta con soporte para el modo oscuro usando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="email" id="email" placeholder="Your Email" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
</div>
<button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
</form>
<div class="mt-4 text-center">
<img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
</div>
</div>
</div>Componentes relacionados
Formulario de inscripción
Un componente de formulario de registro minimalista con Tailwind CSS, compatible con el modo oscuro y las características de diseño receptivo.
Componente del formulario de registro
Componente de formulario de registro con modo oscuro, colores vibrantes y complejidad moderada para fines de blog / contenido.
Componente del formulario de registro
Un componente de formulario de registro interactivo con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite el modo oscuro y muestra imágenes de marcador de posición.