Formulario de inicio de sesión retro
Un componente de formulario de inicio de sesión de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros, diseñado con Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
<div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
<input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">
<a href="#" class="hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-4">
<img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
<span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
</div>
</div>
</div>Componentes relacionados
Componente de formulario de inicio de sesión
Un formulario de inicio de sesión complejo y responsivo con un diseño minimalista / plano adecuado para un blog o un sitio de contenido. Cuenta con un esquema de color monocromático, soporte para temas oscuros y múltiples elementos interactivos, implementados puramente con HTML y Tailwind CSS.
Componente de formulario de inicio de sesión
Formulario de inicio de sesión esqueuomórfico para redes sociales con colores pastel, responsivo y soporte para modo oscuro. El formulario presenta un sutil efecto 3D en las entradas y los botones, imitando elementos físicos. Las sombras y los degradados se utilizan para mejorar la sensación skeuomórfica. Las entradas tienen una sombra insertada suave y los botones tienen una apariencia elevada en la que se puede hacer clic. El esquema de color pastel pasa suavemente a una versión más oscura y apagada en el modo oscuro, manteniendo la legibilidad y la comodidad visual. El diseño responsivo garantiza la usabilidad en todos los dispositivos.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión limpio e inspirado en el código con fuentes monoespaciadas y colores neutros fríos, adecuado para plataformas de mercado. Incluye capacidad de respuesta completa y soporte para modo oscuro.