Componente Pulsanti OAuth
Pulsanti OAuth scheumorfi progettati per imitare gli elementi del mondo reale con i toni della Terra, destinati alle interfacce dei social media.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>Componenti correlati
Componente Pulsanti OAuth
Componente Glassmorphism OAuth Buttons con effetti reattivi e supporto per temi scuri.
Componente Pulsanti OAuth
Un componente pulsanti OAuth reattivo progettato in modalità scura utilizzando Tailwind CSS, con sfondi scuri ed elementi dell'interfaccia utente ottimizzati per ambienti con scarsa illuminazione.
Componente Pulsanti OAuth
Un componente web con pulsanti OAuth progettati con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.