Componente del formulario de registro
Un sencillo formulario de registro con un diseño 3D en pastel, responsive y con soporte para modo oscuro. Adecuado para un blog o sitio web de consumo de contenido.
Código HTML
<div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
</div>
<div class="flex items-center justify-between">
<button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
Register
</button>
</div>
</form>
</div>
</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 minimalista y receptivo diseñado con Tailwind CSS, compatible con el modo oscuro y con espacios limpios con elementos mínimos.
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.