Neumorfismo del componente de inicio de sesión social
Componente de inicio de sesión social con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container max-w-md p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl-dark">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Social Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
<img src="https://www.svgrepo.com/show/303108/google-icon-logo.svg" alt="Google Icon" class="w-6 h-6">
<span>Sign in with Google</span>
</button>
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
<img src="https://www.svgrepo.com/show/303114/facebook-176.svg" alt="Facebook Icon" class="w-6 h-6">
<span>Sign in with Facebook</span>
</button>
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
<img src="https://www.svgrepo.com/show/303113/twitter-social-media-logo.svg" alt="Twitter Icon" class="w-6 h-6">
<span>Sign in with Twitter</span>
</button>
</div>
<div class="mt-6 text-center text-gray-600 dark:text-gray-400">
Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
</div>
</div>
</div>
<style>
.shadow-lg-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social al estilo de Glassmorphism en escala de grises, con soporte para el modo oscuro, adecuado para sitios de comercio electrónico. El diseño es responsivo e incluye efectos de vidrio esmerilado y desenfoque. No se incluye JavaScript.
Componente de inicio de sesión social
Un componente de inicio de sesión social receptivo diseñado para el modo oscuro con un esquema de color monocromático. Adecuado para el consumo de blogs y contenido con funciones interactivas.
Componente de inicio de sesión social
Un complejo componente de inicio de sesión social inspirado en los principios de Material Design, con ricos tonos joya, diseño receptivo y soporte de modo oscuro para interfaces de redes sociales.