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.
Codice HTML
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Google
</button>
<button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Facebook
</button>
<button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Twitter
</button>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
button {
background-color: #1e3a8a;
}
}
</style>Componenti correlati
Componente Pulsanti OAuth
Un componente di pulsanti OAuth reattivo progettato con animazioni accattivanti e colori della terra, adatto per le interfacce dei social media e che supporta temi scuri.
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.
Componente Pulsanti OAuth
Un componente Web con pulsanti OAuth con uno stile di progettazione 3D, effetti reattivi, supporto per temi scuri e immagini segnaposto.