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 Web per i pulsanti di autenticazione OAuth con stile neumorfismo, progettato per un portfolio e include un layout reattivo con supporto per il tema scuro.
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 pulsanti OAuth reattivo con design a scheumorfismo, combinazione di colori analoga e interazioni complesse, adatto per le interfacce dei social media. Include il supporto per il tema scuro e utilizza Tailwind CSS per lo stile, senza JavaScript. Immagini tratte da Lorem Picsum e RandomUser.me.