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.
Codice HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
<div class="space-y-4">
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 1</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 2</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 3</span>
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2),
-5px -5px 15px rgba(0, 0, 0, 0.2);
}
</style>Componenti correlati
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.
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 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.