Componente Pulsanti OAuth
Componente Glassmorphism OAuth Buttons con effetti reattivi e supporto per temi scuri.
Codice HTML
<section class="relative bg-gray-100 dark:bg-gray-900 py-20">
<div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
<div class="relative container mx-auto px-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
Sign in with Facebook
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
Sign in with Twitter
</button>
</div>
</div>
</div>
</section>Componenti correlati
Componente Pulsanti OAuth
Un componente pulsanti OAuth reattivo progettato per la modalità scura con una combinazione di colori analoga, con più elementi interattivi per i social media.
Componente Pulsanti OAuth
Un componente reattivo dei pulsanti OAuth progettato per la modalità oscura con una combinazione di colori vivaci, adatto per siti Web aziendali professionali.
Componente Pulsanti OAuth
Un componente OAuth Buttons in stile neumorfismo progettato per un blog o una piattaforma di consumo di contenuti. Il componente è dotato di pulsanti per vari provider OAuth con un design reattivo, supporto per temi scuri e una combinazione di colori monocromatici.