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.
Código HTML
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-10 rounded-lg shadow-xl w-full max-w-md border-t-8 border-gray-400 dark:border-gray-600 transform skew-y-2">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center transform -skew-y-2">Create Account</h2>
<form class="transform -skew-y-2">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="name">
Full Name
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="name" type="text" placeholder="John Doe">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="email">
Email Address
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="password">
Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="password" type="password" placeholder="********">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="confirm-password">
Confirm Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="confirm-password" type="password" placeholder="********">
</div>
<div class="flex items-center justify-between transform skew-y-2">
<button class="bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform -skew-y-2" type="button">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transform -skew-y-2" href="#">
Already have an account?
</a>
</div>
</form>
</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 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.
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.