Componenti Pulsanti OAuth Componente Pulsanti OAuth

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.

Anteprima

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

Pulsanti OAuth scheumorfi progettati per imitare gli elementi del mondo reale con i toni della Terra, destinati alle interfacce dei social media.

Aperto

Componente Pulsanti OAuth

Componente Glassmorphism OAuth Buttons con effetti reattivi e supporto per temi scuri.

Aperto

Componente Pulsanti OAuth

Un componente Web con pulsanti OAuth con uno stile di progettazione 3D, effetti reattivi, supporto per temi scuri e immagini segnaposto.

Aperto