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.
Codice HTML
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
<h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Google</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Facebook</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Twitter</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with LinkedIn</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
<p class="text-center mt-4">Or</p>
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>Componenti correlati
Pulsanti OAuth Componente 1
Un componente che visualizza i pulsanti OAuth con animazioni accattivanti e supporto per la modalità oscura, utilizzando Tailwind CSS per la progettazione. I pulsanti rispondono alle azioni dell'utente con microinterazioni sottili e le immagini sono incluse da fonti segnaposto casuali.
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 con pulsanti OAuth progettati con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.