Componentes Botones OAuth Componente de botones OAuth

Componente de botones OAuth

Un componente de botones OAuth de estilo Neumorphism diseñado para un blog o una plataforma de consumo de contenido. El componente cuenta con botones para varios proveedores de OAuth con un diseño receptivo, compatibilidad con temas oscuros y un esquema de color monocromático.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 1</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 2</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 3</span>
        </a>
    </div>
</div>

<style>
  .shadow-neumorphism {
    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2), 
                -5px -5px 15px rgba(0, 0, 0, 0.2);
  }
</style>

Componentes relacionados

Componente de botones OAuth

Un conjunto de botones OAuth diseñados con una estética brutalista y Tailwind CSS, con efectos responsivos y soporte para temas oscuros.

Abrir

Componente de botones OAuth

Un componente web con botones OAuth diseñados con un estilo skeuomórfico, efectos responsivos y soporte para temas oscuros mediante Tailwind CSS.

Abrir

Componente de botones OAuth

Componente de botones OAuth receptivos para la interfaz de usuario de comercio electrónico en modo oscuro con esquema de color pastel.

Abrir