Componentes Componentes de autenticación Componente de componentes de autenticación

Componente de componentes de autenticación

Un componente de autenticación diseñado por Neumorphic para comercio electrónico con colores vibrantes, compatibilidad con temas oscuros y diseño receptivo.

Vista previa

Código HTML

<div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

Componentes relacionados

MinimalistAuthForm

Un componente de formulario de inicio de sesión minimalista y receptivo diseñado para carteras o aplicaciones web. Presenta una estética de diseño plano con una combinación de colores complementaria: el azul se usa para los elementos interactivos en el modo claro y el naranja se usa en el modo oscuro. El formulario incluye campos para correo electrónico y contraseña, una opción 'recordarme', un enlace 'olvidé mi contraseña', una opción para registrarse e integración de inicio de sesión social (por ejemplo, GitHub). Es compatible con el tema oscuro y está construido puramente con HTML y Tailwind CSS para una fácil integración.

Abrir