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
Componente Pulsanti OAuth
Un componente semplice, pulito e minimalista per la visualizzazione dei pulsanti di accesso OAuth, che aderisce ai principi di progettazione della tipografia svizzera/internazionale. Presenta monocromatico in bianco e nero con un colore d'accento brillante, piena reattività e supporto per la modalità scura, ideale per la documentazione o i siti wiki.
Componente Pulsanti OAuth
Un componente di pulsanti OAuth semplice e reattivo progettato in stile scheumorfico con una combinazione di colori vivaci, su misura per le piattaforme di e-commerce e che supporta la modalità scura.
Pulsanti RetroOAuth
Un semplice componente di pulsanti OAuth a tema retrò con una combinazione di colori triadica, ideale per un sito portfolio. Presenta un design reattivo e il supporto per la modalità oscura, che ricorda l'estetica degli anni '80/'90.