Componente de inicio de sesión social
Un componente de inicio de sesión social receptivo con estilo glassmorphism, compatible con tema oscuro y con marcadores de posición para imágenes y avatares.
Código HTML
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-700 rounded-xl shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Login with</h2>
<div class="flex flex-col">
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=1" alt="Google" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=2" alt="Facebook" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=3" alt="Twitter" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
<div class="flex items-center justify-center mt-6">
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
<span class="mx-2 text-gray-600 dark:text-gray-400">or</span>
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
</div>
<div class="mt-6">
<input type="email" placeholder="Email" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<input type="password" placeholder="Password" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Login</button>
</div>
<div class="text-center mt-4">
<a href="#" class="text-blue-500 hover:underline transition duration-300">Forgot Password?</a>
</div>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado con Tailwind CSS, con espacios limpios y efectos responsivos para temas claros y oscuros.
Componente de inicio de sesión social
Un componente de inicio de sesión social simple con un diseño Skeuomórfico, tonos tierra y un diseño receptivo con soporte para modo oscuro. Este componente es adecuado para blogs o sitios web de consumo de contenido, ya que ofrece una experiencia de inicio de sesión visualmente atractiva y fácil de usar.
Componente de inicio de sesión social
Componente de inicio de sesión social de diseño de materiales con esquema de color análogo, complejidad simple, para fines de cartera, receptivo con soporte de tema oscuro.