Componentes Botones OAuth Componente de botones OAuth

Componente de botones OAuth

Un componente web con botones OAuth con un estilo de diseño 3D, efectos responsivos, compatibilidad con temas oscuros e imágenes de marcador de posición.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

Componentes relacionados

Componente de botones OAuth (modo oscuro, monocromático)

Componente de botones OAuth responsivo con soporte de modo oscuro mediante Tailwind CSS. Utiliza un esquema de color monocromático con fondos oscuros.

Abrir

Componente de botones OAuth

Componente de botones OAuth con temática retro / vintage / 80 / 90s con esquema de color análogo, complejidad moderada, para redes sociales, diseño receptivo con soporte de modo oscuro. No hay JS, solo HTML con clases de Tailwind.

Abrir

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