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.
Código HTML
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
<form class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="name">Full Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="John Doe" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="********" required />
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 focus:ring focus:ring-blue-500" id="terms" required />
<label for="terms" class="ml-2 block text-gray-700 dark:text-gray-300 text-sm">I accept the Terms and Conditions</label>
</div>
</div>
<div class="mb-6">
<button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:shadow-outline">Register</button>
</div>
<p class="text-center text-gray-600 dark:text-gray-400 text-sm">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a></p>
</form>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>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.
Componente del formulario de registro
Un componente de formulario de registro minimalista y receptivo diseñado con Tailwind CSS, compatible con el modo oscuro y con espacios limpios con elementos mínimos.
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.