Componentes de búsqueda

Categorías

Componentes Botones OAuth

Botones OAuth

Botones para la autenticación a través de servicios de terceros

Componente de botones OAuth

Un componente simple, limpio y minimalista para mostrar botones de inicio de sesión de OAuth, que se adhiere a los principios de diseño de tipografía suiza / internacional. Cuenta con monocromo en blanco y negro con un color de acento brillante, capacidad de respuesta completa y compatibilidad con modo oscuro, ideal para sitios de documentación o wiki.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-950 font-sans">
  <div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8 border border-gray-200 dark:border-gray-800 rounded-lg text-center shadow-sm">
    <h2 class="text-xl sm:text-2xl font-bold mb-6 text-gray-900 dark:text-white leading-tight">Sign in to your account</h2>

    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google logo"/>
        Sign in with Google
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/448227/github.svg" alt="GitHub logo"/>
        Sign in with GitHub
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook logo"/>
        Sign in with Facebook
      </button>
    </div>

    <div class="relative py-4">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white dark:bg-gray-950 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>
    </div>

    <input type="email" placeholder="[email protected]" aria-label="Email address" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md text-base text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200">

    <button class="mt-4 w-full px-4 py-3 rounded-md shadow-sm text-base font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500 transition-colors duration-200">
      Sign In
    </button>

    <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="font-medium text-blue-500 hover:text-blue-600 focus:outline-none focus:underline">Sign up</a>
    </p>
  </div>
</div>

Componente de botones OAuth

Componente de botones de inicio de sesión OAuth simple y receptivo con un diseño esqueuomórfico, esquema de color análogo y soporte de modo oscuro, adecuado para plataformas de foros / comunidades.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen">
  <div class="w-full max-w-sm p-6 sm:p-8 md:p-10 bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 rounded-xl shadow-2xl transition-all duration-300 ease-in-out
    border border-blue-200 dark:border-gray-600
    hover:shadow-3xl hover:border-blue-300 dark:hover:border-gray-500
  ">
    <h2 class="text-center text-2xl sm:text-3xl font-extrabold mb-8 text-indigo-800 dark:text-indigo-200
      text-shadow-light dark:text-shadow-dark
    ">Join the Community</h2>

    <div class="space-y-6">
      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-blue-500 to-blue-600 text-white
        hover:from-blue-600 hover:to-blue-700
        focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
        active:from-blue-700 active:to-blue-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.0003 12.72L19.2003 8.35999L12.0003 4L4.8003 8.35999L12.0003 12.72ZM12.0003 14.28L4.8003 9.91999L12.0003 18.5999L19.2003 9.91999L12.0003 14.28Z" fill="#FFFFFF"></path>
          <path d="M12.0003 4L19.2003 8.36V16.64L12.0003 21L4.8003 16.64V8.36L12.0003 4Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="z-10">Continue with Google</span>
        <div class="absolute inset-0 bg-blue-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-purple-500 to-purple-600 text-white
        hover:from-purple-600 hover:to-purple-700
        focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800
        active:from-purple-700 active:to-purple-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.082-.74.082-.725.082-.725 1.204.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.305 3.492.997.107-.775.418-1.305.762-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.312.465-2.387 1.229-3.22-.124-.3-.535-1.524.118-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.876.118 3.176.766.833 1.229 1.908 1.229 3.22 0 4.604-2.801 5.621-5.476 5.922.429.369.816 1.096.816 2.209v3.291c0 .319.192.694.8 0 4.767-1.589 8.197-6.095 8.197-11.389 0-6.627-5.373-12-12-12z"/>
        </svg>
        <span class="z-10">Continue with GitHub</span>
        <div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-pink-500 to-pink-600 text-white
        hover:from-pink-600 hover:to-pink-700
        focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
        active:from-pink-700 active:to-pink-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024.044.012.064.024.06.032.004.008-.008.012-.008.016v-1.92h-.008c-.004 0-.008.004-.008.012-.004 0-.008.004-.008.008-.004.004-.004.004-.004.004-.004 0-.004 0-.004-.004-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.008-.004-.008-.004-.008-.004-.012-.008-.016-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008h-.008c-.004 0-.008-.004-.008-.008s-.004-.012-.004-.02c-.004-.008-.004-.016-.004-.02-.004-.004-.004-.008-.004-.012-.004-.008-.004-.016-.004-.024-.004-.008-.004-.016-.004-.024 0-.008-.004-.012-.004-.016-.004-.008-.004-.012-.004-.016-.004-.008.004-.012.004-.016.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024A10 10 0 0112 2C6.477 2 2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471z" />
        </svg>
        <span class="z-10">Continue with Apple</span>
        <div class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Or <a href="#" class="font-medium text-indigo-700 hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-100">sign in with email</a>
    </div>
  </div>
</div>

<style>
  /* Custom utility classes for skeuomorphism */
  .text-shadow-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.2);
  }
  .dark .text-shadow-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.2);
  }
</style>

Componente de botones OAuth

Un conjunto de botones OAuth con un diseño industrial en tonos tierra, adecuados para sitios web gubernamentales / de servicio público. Presenta elementos expuestos y estética utilitaria, con capacidad de respuesta total y soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md p-6 sm:p-8 bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 overflow-hidden relative">
    <div class="absolute inset-0 border-4 border-stone-400 dark:border-stone-600 pointer-events-none rounded-lg"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-stone-300/30 via-transparent to-stone-400/30 dark:from-stone-700/30 dark:via-transparent dark:to-stone-600/30 opacity-50"></div>

    <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center tracking-wide uppercase relative z-10">
      <span class="relative inline-block pb-1">
        Sign In Via
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-amber-700 dark:bg-orange-400"></span>
      </span>
    </h2>

    <div class="space-y-4 relative z-10">
      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.016 12.000C22.016 17.523 17.523 22.016 12.000 22.016C6.477 22.016 1.984 17.523 1.984 12.000C1.984 6.477 6.477 1.984 12.000 1.984C17.523 1.984 22.016 6.477 22.016 12.000ZM4.896 12.000C4.896 15.932 8.068 19.104 12.000 19.104C15.932 19.104 19.104 15.932 19.104 12.000C19.104 8.068 15.932 4.896 12.000 4.896C8.068 4.896 4.896 8.068 4.896 12.000Z"/>
          <path d="M12.062 14.887L12.062 17.072H14.887L14.887 14.887H12.062ZM12.062 7.072L12.062 9.257H14.887L14.887 7.072H12.062ZM7.072 12.062L7.072 14.887H9.257L9.257 12.062H7.072ZM7.072 7.072L7.072 9.257H9.257L9.257 7.072H7.072ZM12.062 9.257L12.062 12.000H14.887L14.887 9.257H12.062Z"/>
        </svg>
        <span>Sign in with Government ID</span>
      </button>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/>
        </svg>
        <span>Sign in with Email & Password</span>
      </button>

      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
        <span class="flex-shrink mx-4 text-stone-600 dark:text-stone-400 text-sm sm:text-base font-medium uppercase">OR</span>
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
      </div>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 8h-2.5v2.871h2.361c-.139 1.956-1.921 3.208-4.361 3.208-3.038 0-5.5-2.462-5.5-5.5s2.462-5.5 5.5-5.5c1.474 0 2.802.584 3.791 1.523l1.768-1.768c-1.464-1.398-3.414-2.255-5.559-2.255-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9h-9zm0 0h5m-5 0v5m5 0v-5m-5 5v-5h5v5h-5z"/>
        </svg>
        <span>Sign in with other Service</span>
      </button>
    </div>

    <p class="mt-6 text-xs sm:text-sm text-center text-stone-600 dark:text-stone-400 relative z-10">
      By signing in, you agree to our
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Terms of Service</a>
      and
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Privacy Policy</a>.
    </p>
  </div>
</div>

Componente de botones OAuth - Acuarela/Artístico

Un componente de botones OAuth artístico y de temática retro diseñado para marcas de moda y belleza. Cuenta con texturas suaves y pintadas, colores vintage apagados e incluye opciones para el inicio de sesión en Google, Apple y Facebook. Totalmente responsivo y compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-rose-50 to-pink-100 dark:from-stone-900 dark:to-purple-950 font-sans">
  <div class="relative w-full max-w-md p-8 md:p-10 rounded-3xl shadow-xl overflow-hidden
    bg-white/70 backdrop-blur-sm dark:bg-gray-800/70
    border border-pink-200 dark:border-purple-800
    font-semibold text-gray-800 dark:text-gray-100">

    <!-- Background artistic elements -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-30">
      <img src="https://picsum.photos/id/1069/800/800" alt="background texture 1" class="absolute top-0 -left-10 w-[500px] h-[500px] object-cover object-center scale-150 rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(30deg);"/>
      <img src="https://picsum.photos/id/1070/800/800" alt="background texture 2" class="absolute bottom-0 -right-10 w-[500px] h-[500px] object-cover object-center scale-150 -rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(-30deg);"/>
    </div>
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-rose-100/30 via-sky-100/30 to-purple-100/30 dark:from-stone-900/50 dark:via-gray-900/50 dark:to-purple-900/50 mix-blend-multiply"></div>

    <!-- Content -->
    <div class="relative z-10 flex flex-col items-center">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-4 text-violet-700 dark:text-purple-300 drop-shadow-sm font-serif" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
        Unlock Your Style
      </h2>
      <p class="text-center text-sm md:text-md mb-8 text-gray-700 dark:text-gray-300 max-w-sm">
        Sign in for exclusive beauty tips, fashion collections, and personalized offers.
      </p>

      <div class="space-y-4 w-full">
        <!-- Google Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-amber-100 border border-amber-300 text-amber-800 
          hover:bg-amber-200 hover:border-amber-400
          dark:bg-yellow-700 dark:border-yellow-600 dark:text-yellow-100
          dark:hover:bg-yellow-600 dark:hover:border-yellow-500
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24.001 10.231c4.542 0 7.854 1.936 9.684 3.73l6.577-6.529C35.485 3.398 29.986 0 24.001 0c-8.913 0-16.592 4.908-20.485 12.012l7.251 5.617c1.942-5.719 7.426-9.172 13.234-9.172z" fill="#EA4335"/>
            <path d="M46.726 23.905c0-1.5-.121-2.909-.345-4.256H24.001v8.082h12.529c-.544 3.031-2.222 5.59-4.881 7.301l6.471 5.011c3.96-7.301 6.27-16.568 6.27-26.138z" fill="#4285F4"/>
            <path d="M3.516 29.808l7.251-5.617c-.506-1.564-.784-3.232-.784-4.891s.278-3.327.784-4.891l-7.251-5.617C.949 14.59.001 19.167.001 23.905s.949 9.315 3.515 13.56z" fill="#FBBC05"/>
            <path d="M24.001 48c6.643 0 12.261-2.091 16.34-5.679l-6.471-5.011c-2.457 1.637-5.59 2.59-9.869 2.59-8.497 0-13.844-5.719-15.969-13.913l-7.251 5.617C7.409 43.092 15.088 48 24.001 48z" fill="#34A853"/>
          </svg>
          Sign in with Google
        </button>

        <!-- Apple Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-gray-900 border border-black text-white 
          hover:bg-gray-800 hover:border-gray-900
          dark:bg-gray-200 dark:border-gray-50 dark:text-gray-900
          dark:hover:bg-gray-300 dark:hover:border-gray-100
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5zm0 2.5c-4.962 0-9 4.038-9 9s4.038 9 9 9 9-4.038 9-9-4.038-9-9-9zM12 6c.942 0 1.7.758 1.7 1.7S12.942 9.4 12 9.4s-1.7-.758-1.7-1.7S11.058 6 12 6zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zm0 3c-2.316 0-4.2 1.884-4.2 4.2s1.884 4.2 4.2 4.2 4.2-1.884 4.2-4.2-1.884-4.2-4.2-4.2zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zM12 12c.942 0 1.7.758 1.7 1.7S12.942 15.4 12 15.4s-1.7-.758-1.7-1.7S11.058 12 12 12zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2z"/>
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5z" clip-rule="evenodd" fill-rule="evenodd"/>
            <path d="M12 10.428a2.572 2.572 0 100-5.144 2.572 2.572 0 000 5.144zm0 2.5c-3.149 0-5.7 2.551-5.7 5.7s2.551 5.7 5.7 5.7 5.7-2.551 5.7-5.7-2.551-5.7-5.7-5.7z"/>
          </svg>
          Sign in with Apple
        </button>

        <!-- Facebook Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-blue-600 border border-blue-700 text-white 
          hover:bg-blue-700 hover:border-blue-800
          dark:bg-blue-800 dark:border-blue-700 dark:text-blue-100
          dark:hover:bg-blue-700 dark:hover:border-blue-600
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading">
          <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z"/>
            <path fill-rule="evenodd" d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z" clip-rule="evenodd"/>
          </svg>
          Sign in with Facebook
        </button>
      </div>

      <div class="flex items-center w-full mt-8 mb-6">
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
        <span class="px-4 text-gray-500 dark:text-gray-400 text-sm italic">Or</span>
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
      </div>

      <!-- Email Password Section -->
      <form class="w-full space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" placeholder="Your email address" autocomplete="email"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" placeholder="Password" autocomplete="current-password"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <button type="submit" class="w-full px-6 py-3 rounded-xl text-lg font-bold 
          bg-gradient-to-r from-pink-400 to-purple-500 text-white 
          hover:from-pink-500 hover:to-purple-600 
          dark:from-fuchsia-600 dark:to-violet-700 
          dark:hover:from-fuchsia-700 dark:hover:to-violet-800 
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 mt-4 
          font-heading tracking-wide"
          style="background-image: linear-gradient(to right, #ec4899, #ec4899 50%, #8b5cf6 50%, #8b5cf6); background-size: 200% 100%; transition: background-position 0.3s cubic-bezier(0.4, 0, 0.2, 1); filter: saturate(1.2);"
          onmouseover="this.style.backgroundPosition = '-100% 0';" onmouseout="this.style.backgroundPosition = '0 0';">
          Sign In
        </button>
      </form>

      <div class="mt-6 text-center text-sm md:text-base text-gray-600 dark:text-gray-300">
        Don't have an account? 
        <a href="#" class="text-violet-600 dark:text-purple-400 hover:underline font-semibold">
          Sign Up
        </a>
      </div>

    </div>
  </div>
</div>

<style>
  /* Adding custom font definitions for more artistic feel */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;500;700&display=swap');

  .font-serif {
    font-family: 'Playfair Display', serif;
  }
  .font-sans {
    font-family: 'Quicksand', sans-serif;
  }
  .font-heading {
    font-family: 'Quicksand', sans-serif;
  }
</style>

Componente de botones OAuth

Componente de botones OAuth simple y receptivo con un estilo artístico / acuarela, esquema de color neutro frío, adecuado para aplicaciones de comercio electrónico. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-blue-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <div class="w-full max-w-sm p-6 rounded-2xl shadow-xl backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/70 dark:from-gray-700/80 dark:to-gray-800/70 border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105">

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Continue Shopping
    </h2>

    <p class="text-sm text-gray-600 dark:text-gray-300 mb-8 text-center leading-relaxed">
      Sign in or create an account to personalize your experience.
    </p>

    <div class="space-y-4">
      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12.24 10.24v3.53h4.63c-.19 1.13-.76 2.39-1.92 3.12-1.28.84-2.73 1.25-4.22 1.25-3.3 0-6.1-1.78-7.58-4.44C-.03 11.23-.42 8.78.36 6.55c.78-2.23 2.51-3.83 4.8-4.49 2.29-.66 4.77-.3 6.64 1.16 1.48 1.18 2.37 2.82 2.37 4.54h-3.69c0-.49-.15-.97-.43-1.37-.28-.4-.68-.7-1.14-.88-.46-.18-.96-.2-1.46-.06-.5.14-.95.43-1.26.83-.3.4-.46.9-.46 1.42 0 .52.16 1.02.46 1.42.31.4.76.69 1.26.83.5.14 1 .12 1.46-.06.46-.18.86-.48 1.14-.88.29-.4.43-.88.43-1.37h3.69v.01z"/><path d="M22.02 12.02a9 9 0 01-1.85 5.56 8.97 8.97 0 01-5.56 1.85 8.98 8.98 0 01-5.56-1.85 8.97 8.97 0 01-1.85-5.56 8.97 8.97 0 011.85-5.56 8.98 8.98 0 015.56-1.85 8.97 8.97 0 015.56 1.85 8.97 8.97 0 011.85 5.56z" fill="#4285F4"/><circle cx="12" cy="12" r="1" fill="#EA4335"/><circle cx="12" cy="12" r="1" fill="#FBBC05"/><circle cx="12" cy="12" r="1" fill="#34A853"/>
        </svg>
        Continue with Google
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm3.535 7.424c.007-.058.012-.116.012-.175 0-.114-.009-.228-.027-.341-.019-.114-.047-.225-.084-.336-.037-.11-.082-.218-.137-.324-.055-.106-.12-.21-.194-.31-.1-.137-.215-.262-.345-.38-.073-.066-.15-.128-.231-.188-.082-.06-.168-.116-.258-.168-.09-.052-.18-.098-.276-.142-.096-.044-.196-.084-.3-.122-.104-.038-.21-.072-.32-.102-.11-.03-.22-.054-.333-.075C12.333 4.015 12.167 4 12 4c-.167 0-.333.015-.5.045-.167.03-.328.077-.487.14-.158.062-.314.137-.468.225-.154.088-.302.19-.444.3-.142.11-.277.23-.404.36-.127.13-.245.267-.354.41-.11.14-.21.285-.3.435-.09.15-.17.3-.24.456-.07.156-.128.318-.175.485-.047.167-.08.338-.097.51-.017.172-.025.345-.025.518V9h4.375c.007.575.127 1.137.362 1.687.235.55.57.994 1.006 1.332.437.337.954.544 1.55.625.596.08 1.205.042 1.826-.115s1.207-.406 1.748-.777c.541-.37.97-.837 1.286-1.398ZM12 20.915c-1.378-.002-2.738-.29-4.025-.865-1.287-.575-2.482-1.418-3.535-2.496C3.36 16.486 2.518 15.29 1.94 14.004c-.57-1.287-.85-2.646-.848-4.025h4.375v2.85c0 .038.003.076.009.114.006.038.014.076.024.114.01.038.022.074.037.11.015.036.032.07.052.103.02.034.043.065.068.094.026.029.054.056.09.08.035.025.074.047.116.066.042.02.086.037.133.053.047.016.095.028.145.038l.15.018c.074.008.15.006.225-.005.075-.01.15-.025.22-.045.07-.02.138-.047.2-.08.062-.033.12-.07.17-.11.05-.04.094-.084.13-.13.036-.046.064-.093.085-.14.02-.047.034-.095.04-.145.006-.05.008-.1.008-.15l-.015-3.05h4.375V15h-4.375c-.328-.01-.65-.015-.968-.016-.318-.001-.637.003-.95.012-.313.009-.623.027-.93.053-.306.026-.607.062-.9.109-.292.048-.578.106-.856.175-.278.07-.547.15-.805.245-.257.095-.505.2-.74.31-.236.11-.46.223-.672.34-.212.118-.41.24-.59.366-.18.125-.347.252-.5.378-.153.126-.29.25-.407.37-.118.12-.224.238-.317.355-.094.116-.174.23-.238.34-.065.11-.115.215-.15.318-.035.103-.053.204-.055.305v.23h12.5v-2.85z"/>
        </svg>
        Continue with Apple
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.02 0H1.98A1.981 1.981 0 000 1.98v20.04c0 1.093.887 1.98 1.98 1.98h20.04c1.093 0 1.98-.887 1.98-1.98V1.98A1.981 1.981 0 0022.02 0zm-3.05 7.82c-.372 0-.677-.31-.677-.69-.001-.38.304-.69.676-.69.373 0 .677.31.677.69s-.304.69-.676.69zm-1.808 1.91h3.048c.082.91-.497 2.103-1.637 2.103-1.077 0-1.572-.75-1.41-1.53-.001-.001-.001-.002-.001-.003zm-3.23 3.99c.045.029.091.05.138.064l-.062-.02c-.062.01-.122.02-.184.02-.123-.002-.24-.03-.35-.07l-.02-.01-.06-.04c-.05-.03-.098-.06-.145-.1l-.06-.03-.04-.02c-.04-.03-.07-.05-.11-.08l-.07-.04c-.04-.02-.08-.05-.11-.07-.04-.02-.07-.04-.1-.06s-.06-.03-.08-.04l-.04-.02a.208.2088 20.8 1.02c.005.002.01.004.015.006.002.001.004.002.006.003l.006.002h.001a.36.36 0 01.02.01c.01.003.02.006.03.009l.067.02c-.01-.004-.02-.007-.03-.01v.001A.256.2560 25.6 0 0113.88 13.7l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46-.09-.17-.16-.34-.21-.52-.05-.19-.08-.37-.08-.57s.0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05c.001.001.001.002.001.003l-.001.001a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001z"/>
        </svg>
        Continue with Facebook
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
    </div>

    <form class="space-y-4">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-white bg-white dark:bg-gray-800 transition-colors duration-200 text-sm" placeholder="Email address">
      </div>
      <button type="submit" class="w-full flex justify-center px-6 py-3 border border-transparent rounded-xl shadow-sm text-base font-medium text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 ">
        Continue with Email
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
      By continuing, you agree to our <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Terms of Service</a> and <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Privacy Policy</a>.
    </p>
  </div>

</div>

Componente de botones OAuth

Un conjunto de botones OAuth minimalistas y vibrantes para un sitio de cartera, con múltiples proveedores, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-xl shadow-2xl dark:shadow-none transform hover:scale-105 transition duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight leading-tight">
      Connect Your Account
    </h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8 sm:mb-10 text-sm sm:text-base leading-relaxed">
      Unlock full features and personalize your experience by connecting with one of your existing accounts.
    </p>

    <div class="grid gap-4 sm:gap-5 md:gap-6">
      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.007 11.597c.01-.223.01-.447.01-.67-.008-2.607-1.04-5.06-2.914-6.938C17.3 2.19 14.85 1.16 12.247 1.15H12.2c-5.803.015-10.51 4.72-10.51 10.51 0 5.804 4.71 10.51 10.51 10.51 4.904 0 9.117-3.39 10.27-8.15zM12.007 19.86c-4.004 0-7.25-3.24-7.25-7.25 0-4 3.246-7.25 7.25-7.25s7.25 3.25 7.25 7.25c0 4.01-3.245 7.25-7.25 7.25z" />
          <circle cx="12.007" cy="12.007" r="3.74" />
        </svg>
        Continue with Google
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm sm:text-base font-medium text-gray-800 dark:text-white bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.372 0 0 5.372 0 12c0 5.304 3.435 9.771 8.204 11.332.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04c-3.338.727-4.043-1.611-4.043-1.611-.546-1.385-1.334-1.755-1.334-1.755-1.09-.74.08-1.02.08-1.02 1.205.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.304 3.491.996.109-.775.424-1.305.773-1.606C7.153 16.711 4.542 15.65 4.542 11.37c0-1.309.46-2.38 1.22-3.22-.122-.303-.529-1.523.116-3.176 0 0 1-.322 3.29 1.23.95-.264 1.956-.396 2.96-.396 1.004 0 2.01.132 2.96.396 2.29-1.552 2.29-1.23 2.29-1.23.645 1.653.238 2.873.116 3.176.76.84 1.22 1.91 1.22 3.22 0 4.29-2.613 5.337-5.093 5.627.427.366.812 1.09.812 2.195 0 1.58-.014 2.855-.014 3.237 0 .32.215.69.825.577C20.565 21.77 24 17.304 24 12c0-6.628-5.372-12-12-12z"/>
        </svg>
        Continue with GitHub
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-black hover:bg-gray-800 dark:bg-gray-900 dark:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M21.503 7.203c-.222-.843-.75-1.579-1.38-2.208-1.04-1.04-2.276-1.748-3.5-2.072C15 2.658 12 2.658 12 2.658s-3 0-4.623.265C5.753 3.418 4.516 4.126 3.477 5.166c-.63.63-1.157 1.365-1.38 2.208-.262 1.48-.263 4.542-.263 4.542s0 3.063.263 4.542c.222.843.75 1.579 1.38 2.208 1.04 1.04 2.276 1.748 3.5 2.072C8 21.342 11 21.342 11 21.342s3 0 4.623-.265c1.224-.324 2.46-1.032 3.5-2.072.63-.63 1.157-1.365 1.38-2.208.263-1.48.263-4.542.263-4.542s0-3.063-.263-4.542zM9.998 15.352V8.65l6.502 3.351L9.998 15.352z"/>
        </svg>
        Continue with YouTube
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7.5 1.5H4C2.62 1.5 1.5 2.62 1.5 4v3.5c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM7.5 14H4c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5zM20 1.5h-3.5c-1.38 0-2.5 1.12-2.5 2.5v3.5c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM20 14h-3.5c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5z"/>
        </svg>
        Continue with Instagram
      </a>

    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-500"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm sm:text-base">Or continue with</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-500"></div>
    </div>

    <form class="space-y-4 sm:space-y-5">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
            class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-purple-600">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
            Forgot your password?
          </a>
        </div>
      </div>
      <div>
        <button type="submit"
          class="w-full flex justify-center py-2.5 sm:py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
      Don't have an account? <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">Sign Up</a>
    </p>
  </div>
</div>

RetroOAuthButtons

Un componente de botones OAuth simple de temática retro con un esquema de color triádico, ideal para un sitio de portafolio. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, que recuerda a la estética de los años 80/90.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-zinc-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-200 dark:bg-violet-900 border-4 border-lime-500 dark:border-orange-500 transform -skew-x-3 rotate-1 transition-all duration-300">
    <h2 class="text-center text-3xl font-extrabold text-lime-800 dark:text-lime-200 mb-6 font-mono tracking-widest uppercase animate-pulse-text">ACCESS GRANTED</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH GIT
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH BOOK
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH SPACE
      </button>
    </div>
    <p class="text-center text-sm text-lime-700 dark:text-violet-300 mt-6 font-sans italic">Prepare for System Initialization</p>
  </div>
</div>

Componente de botones OAuth

Componente de botones OAuth con microinteracciones para un portafolio, con un esquema de color vibrante y un diseño simple, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 p-4">
  <h2 class="text-4xl font-extrabold text-white dark:text-gray-100 mb-8 animate-fade-in-down">Join the Future</h2>
  <div class="flex flex-col space-y-4">
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Google
      <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Facebook_F_icon.svg" alt="Facebook Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Facebook
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with GitHub
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-gray-600 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(-5%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 1s infinite;
  }

  @keyframes ping {
    0% {
      transform: scale(0.2); 
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); 
      opacity: 0;
    }
  }

  .group-hover\:animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
</style>

Componente de botones OAuth

Componente brutalista de botones OAuth para un portafolio con combinación de colores complementaria. Responsivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-neutral-100 p-8 flex items-center justify-center dark:bg-neutral-900">
  <div class="max-w-4xl w-full bg-white border-4 border-black p-10 shadow-[8px_8px_0_0_#000] dark:bg-neutral-800 dark:border-white dark:shadow-[8px_8px_0_0_#fff] relative">
    <div class="absolute top-0 left-0 -mt-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute top-0 right-0 -mt-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 right-0 -mb-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>

    <h2 class="text-5xl md:text-7xl font-extrabold text-blue-700 mb-8 text-center uppercase tracking-tighter dark:text-orange-400 leading-none">
      Connect Your Profile
      <span class="block text-2xl md:text-4xl text-black dark:text-white mt-2">Showcase Your Brilliance</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-yellow-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-yellow-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506497/google.svg" alt="Google" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with Google
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-green-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-green-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506499/github.svg" alt="GitHub" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with GitHub
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-purple-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-purple-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506518/linkedin.svg" alt="LinkedIn" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with LinkedIn
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-pink-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-pink-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506506/twitter.svg" alt="X" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with X
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-lg text-black dark:text-white font-mono">Or, connect manually:</p>
      <input type="email" placeholder="Your Email" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <input type="password" placeholder="Your Password" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <button class="mt-6 w-full md:w-3/4 px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-red-500 text-white shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-orange-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        Log In
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-sm text-black dark:text-white font-mono">
        By connecting, you agree to our <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Terrible Terms</a> and <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Questionable Privacy Policy</a>.
      </p>
    </div>
  </div>
</div>

Componente de botones OAuth

Un componente de botones OAuth de temática oscura y receptivo con un esquema de color triádico y elementos interactivos complejos para sitios web comerciales / corporativos.

Abrir Vista previa

                <div class="min-h-screen bg-gray-900 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="w-full max-w-md bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-teal-500"><h2 class="text-3xl font-extrabold text-white text-center">Sign In / Sign Up</h2><p class="text-gray-400 text-center">Join our community and explore amazing features</p><div class="space-y-4"><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"><img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google Icon" class="w-5 h-5 mr-3"/>Sign in with Google</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out dark:bg-indigo-700 dark:hover:bg-indigo-800"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Facebook_icon.svg/1200px-Facebook_icon.svg.png" alt="Facebook Icon" class="w-5 h-5 mr-3"/>Sign in with Facebook</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out dark:bg-pink-700 dark:hover:bg-pink-800"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Icon" class="w-5 h-5 mr-3 border-white rounded-full"/>Sign in with GitHub</button></div><div class="relative flex items-center"><div class="flex-grow border-t border-gray-700"></div><span class="flex-shrink mx-4 text-gray-500">Or continue with</span><div class="flex-grow border-t border-gray-700"></div></div><form class="space-y-4"><input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><input type="password" placeholder="Password" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><button type="submit" class="w-full px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out dark:bg-teal-700 dark:hover:bg-teal-800">Log In</button></form><p class="text-center text-gray-400">Don't have an account? <a href="#" class="text-teal-500 hover:text-teal-400 font-medium">Sign Up</a></p><div class="flex justify-around mt-6"><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Privacy Policy</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Terms of Service</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Help</a></div></div></div>