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 componente de formulario de inicio de sesión complejo y receptivo con microinteracciones y un esquema de color análogo, adecuado para sitios web comerciales / corporativos. Es compatible con el modo oscuro y utiliza Tailwind CSS para el estilo.
Formulario de inicio de sesión de neumorfismo
Un componente de formulario de inicio de sesión de estilo Neumorphism para un tablero, con un diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos responsivos, que admite temas oscuros con Tailwind CSS.