SocialLoginComponent

Un componente de inicio de sesión social receptivo construido con Tailwind CSS, con sutiles microinteracciones de desplazamiento y soporte completo para el modo oscuro. Utiliza CDN de iconos simples para logotipos de redes sociales.

Vista previa

Código HTML

<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
  <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
  <div class="space-y-4">
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
      Sign in with Google
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
      Sign in with Facebook
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
      Sign in with Twitter
    </button>
  </div>
</div>

Componentes relacionados

Escala de grises neumórfica Social Login

Un componente de inicio de sesión social receptivo con un estilo de diseño de neumorfismo en escala de grises. Incluye botones para proveedores de redes sociales, un separador y enlaces para registrarse/olvidar la contraseña. Admite el modo oscuro usando el prefijo dark: de Tailwind. Diseñado para entornos de panel de control.

Abrir

Componente de inicio de sesión social de lujo para la aplicación meteorológica

Un componente de inicio de sesión social elegante y sofisticado diseñado para una aplicación meteorológica/climática, con colores de alto contraste, tipografía refinada y compatibilidad con el modo oscuro. Ofrece múltiples opciones de inicio de sesión y una sensación moderna y premium.

Abrir

Componente de inicio de sesión social Art Deco

Un complejo componente de inicio de sesión social diseñado con una estética Art Deco para CRM/Business Tools, con patrones geométricos, neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.

Abrir