Componente Pulsanti OAuth
Un set di pulsanti OAuth progettati con un'estetica brutalista e Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
Provider 1
</a>
<a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
Provider 2
</a>
<a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
Provider 3
</a>
</div>
</div>Componenti correlati
Componente Pulsanti OAuth
Un componente pulsanti OAuth reattivo con uno stile di progettazione 3D, supporto per temi scuri e immagini segnaposto. Il componente presenta pulsanti per Google, Facebook, Twitter e LinkedIn, con effetti al passaggio del mouse per profondità e coinvolgimento.
Componente Pulsanti OAuth
Un componente web complesso per pulsanti OAuth con glassmorphism e toni della terra, progettato per siti web aziendali/aziendali con supporto per reattività e modalità scura.
Componente Pulsanti OAuth
Componente pulsanti OAuth reattivi per l'interfaccia utente di e-commerce in modalità scura con combinazione di colori pastello.