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.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="username">Username</label>
<input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="email">Email</label>
<input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="password">Password</label>
<input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
</div>
<div class="mb-6">
<label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
</div>
<div class="flex items-center justify-between mb-4">
<input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
<label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
</form>
<p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
</div>
<footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>Componentes relacionados
Formulario de inscripción Skeuomórfico
Formulario de registro esqueuomórfico con esquema de color monocromático, diseñado para uso comercial / corporativo con soporte de modo oscuro y capacidad de respuesta utilizando Tailwind CSS. Sin JavaScript.
Componente del formulario de registro
Un componente de formulario de registro receptivo con un diseño de morfismo de vidrio, combinación de colores en escala de grises y compatibilidad con temas oscuros, adecuado para sitios web comerciales / corporativos.
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.