Componentes Inicio de sesión social Componente de inicio de sesión social

Componente de inicio de sesión social

Un componente de inicio de sesión social simple y esqueumórfico con colores complementarios, adecuado para un blog o sitio de contenido, diseñado para ser receptivo y admitir el modo oscuro.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-800 dark:to-purple-900 border border-indigo-300 dark:border-purple-700
              transform transition-all duration-300 hover:scale-105 hover:shadow-2xl
              relative overflow-hidden group">

    <!-- Background Blips for Skeuomorphism -->
    <div class="absolute top-[-20px] left-[-20px] w-20 h-20 bg-indigo-400 dark:bg-purple-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>
    <div class="absolute bottom-[-20px] right-[-20px] w-24 h-24 bg-purple-400 dark:bg-indigo-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>

    <h2 class="text-center text-3xl font-extrabold text-indigo-900 dark:text-white mb-6
               relative drop-shadow-md">
      <span class="relative z-10">Login</span>
      <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-10 blur-xl"></span>
    </h2>

    <p class="text-center text-gray-700 dark:text-gray-300 mb-8">
      Join us to access exclusive content and features.
    </p>

    <div class="space-y-4">
      <!-- Google Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-500 dark:focus:ring-purple-500
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-gray-200 dark:border-gray-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-gray-50 to-gray-200 dark:from-gray-700 dark:to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.15c-.24 1.34-.9 2.45-1.92 3.23v2.8h3.69c2.16-2 3.42-4.93 3.42-8.24z" fill="#4285F4"></path>
          <path d="M12 23c3.27 0 6.02-1.08 8.03-2.91l-3.69-2.8c-1 .67-2.3 1.07-4.34 1.07-3.33 0-6.1-2.22-7.12-5.21H.9v2.87C2.98 20.58 7.15 23 12 23z" fill="#34A853"></path>
          <path d="M4.88 14.16c-.1-.3-.16-.62-.16-.96s.06-.66.16-.96V9.33H.9C.33 10.44 0 11.68 0 12.97s.33 2.53.9 3.64l3.98-3.9z" fill="#FBBC05"></path>
          <path d="M12 5.03c1.77 0 3.3.61 4.54 1.79l3.24-3.24C18.02 1.84 15.27 0 12 0 7.15 0 2.98 2.42.9 6.01l3.98 3.09c1.02-2.99 3.79-5.21 7.12-5.21z" fill="#EA4335"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-blue-600 dark:bg-blue-800 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-blue-500 dark:focus:ring-blue-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-blue-700 dark:border-blue-900
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.909c0-.818.062-1.491 1.092-1.491h2.908v-5h-4c-4.473 0-5 3.159-5 5.258v2.742z"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Facebook</span>
      </button>

      <!-- Email login option -->
      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="flex-shrink mx-4 text-gray-600 dark:text-gray-400 font-medium">Or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
      </div>

      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-indigo-600 dark:bg-purple-600 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-700 dark:focus:ring-purple-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-indigo-700 dark:border-purple-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-700 to-purple-500 dark:from-purple-800 dark:to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="font-semibold z-10">Sign in with Email</span>
      </button>
    </div>

    <p class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
      Don't have an account? 
      <a href="#" class="font-bold text-indigo-700 dark:text-purple-400 hover:underline
                          transform transition-colors duration-200 hover:text-indigo-900 dark:hover:text-purple-300">
        Sign up
      </a>
    </p>
  </div>
</div>

Componentes relacionados

Componente de inicio de sesión social

Un componente de inicio de sesión social complejo y receptivo diseñado para paneles. Utiliza una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Cuenta con botones de proveedor de redes sociales, un formulario de correo electrónico / contraseña, un interruptor "Recuérdame" y un separador con opciones de inicio de sesión alternativas. Totalmente responsivo con ilustración de imagen y utiliza Tailwind CSS con prefijo dark: para soporte de tema oscuro. No se necesita JavaScript.

Abrir

Componente de inicio de sesión social

Un componente de inicio de sesión social retro/vintage diseñado para plataformas de comercio electrónico con una combinación de colores pastel y compatibilidad con el modo oscuro.

Abrir

Componente de inicio de sesión social retro

Un componente de inicio de sesión social simple y receptivo con una estética retro / vintage de los 80 / 90 que utiliza una paleta de colores bosque / verde. Incluye soporte para modo oscuro.

Abrir