Componente del formulario de registro
Un formulario de registro simple y receptivo para un mercado con un estilo de diseño industrial, una combinación de colores cálidos y neutros y compatibilidad con el modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans p-4">
<div class="max-w-md w-full bg-stone-50 dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-gray-700">
<div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-b border-stone-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 text-center uppercase tracking-wide">Join Our Marketplace</h2>
<p class="mt-2 text-center text-sm text-stone-600 dark:text-stone-300">Create your account to start selling and buying.</p>
</div>
<form class="px-8 py-8 space-y-6">
<div>
<label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Username</label>
<div class="mt-1">
<input type="text" id="username" name="username" autocomplete="username" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Email address</label>
<div class="mt-1">
<input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Password</label>
<div class="mt-1">
<input type="password" id="password" name="password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
</div>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Confirm Password</label>
<div class="mt-1">
<input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
</div>
</div>
<div class="flex items-center">
<input id="terms-and-privacy" name="terms-and-privacy" type="checkbox" class="h-4 w-4 text-amber-600 dark:text-amber-500 border-stone-300 dark:border-gray-600 rounded focus:ring-amber-500">
<label for="terms-and-privacy" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">
I agree to the
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Terms</a>
and
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Privacy Policy</a>
</label>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-offset-gray-800 uppercase tracking-widest transition duration-150 ease-in-out">
Register
</button>
</div>
</form>
<div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-t border-stone-200 dark:border-gray-600 text-center">
<p class="text-sm text-stone-600 dark:text-stone-300">
Already have an account?
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Sign in here</a>
</p>
</div>
</div>
</div>Componentes relacionados
Formulario de registro de esqueuomorfismo en escala de grises
Un componente de formulario de registro esqueuomórfico en escala de grises para portafolios, con complejidad moderada, diseño receptivo y soporte de tema oscuro, sin Javascript. Imágenes de picsum.photos y randomuser.me utilizadas.
Componente de formulario de registro - Tema de música/audio
Un componente de formulario de registro limpio y minimalista con un estilo de tipografía suizo/internacional y una combinación de colores otoñales, diseñado para plataformas de música/audio. Es totalmente responsivo, admite el modo oscuro y utiliza HTML semántico.
Componente del formulario de registro
Un componente de formulario de registro responsivo diseñado con un estilo skeuomórfico, utilizando un esquema de color monocromático y adaptado a las experiencias de comercio electrónico. Es compatible con el modo oscuro e incluye funciones de entrada interactivas para el registro de usuarios.