Componente del formulario de registro
Componente de formulario de registro con modo oscuro, colores vibrantes y complejidad moderada para fines de blog / contenido.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
<div class="bg-gray-800 dark:bg-gray-900 p-10 rounded-lg shadow-xl w-full max-w-md">
<h1 class="text-2xl font-bold text-teal-400 dark:text-teal-500 mb-6 text-center">Register</h1>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Username</label>
<input type="text" id="username" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Email</label>
<input type="email" id="email" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Password</label>
<input type="password" id="password" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your password">
</div>
<button type="submit" class="w-full bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-bold py-2 px-4 rounded-md hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Register</button>
</form>
</div>
</div>Componentes relacionados
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.
Formulario de inscripción Art Deco
Un componente de formulario de registro receptivo con una estética de diseño Art Deco, combinación de colores de alto contraste y compatibilidad con modo oscuro, adecuado para sitios web gubernamentales o de servicio público.
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.