Componenti Pulsanti OAuth Componente Pulsanti OAuth

Componente Pulsanti OAuth

Un componente web con pulsanti OAuth progettati con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
    <div class="grid grid-cols-1 gap-4">
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

Componenti correlati

Componente Pulsanti OAuth

Componente pulsanti OAuth a tema retrò / vintage / anni '80 / 90 con combinazione di colori analoga, complessità moderata, per social media, design reattivo con supporto per la modalità oscura. Niente JS, solo HTML con le classi Tailwind.

Aperto

Componente Pulsanti OAuth

Componente pulsanti OAuth semplice e reattivo con uno stile acquerello/artistico, combinazione di colori neutri freddi, adatto per applicazioni di e-commerce. Include il supporto per la modalità oscura.

Aperto

Componente pulsanti OAuth (modalità scura monocromatica)

Componente pulsanti OAuth reattivi con supporto della modalità oscura utilizzando Tailwind CSS. Utilizza una combinazione di colori monocromatica con sfondi scuri.

Aperto