Componente pulsanti OAuth (modalità scura monocromatica)
Componente pulsanti OAuth reattivi con supporto della modalità oscura utilizzando Tailwind CSS. Utilizza una combinazione di colori monocromatica con sfondi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 p-4">
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-100 mb-6">Login or Sign Up</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.165 6.839 9.489.5.092.682-.216.682-.48v-1.693c-2.791.611-3.365-1.34-3.365-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.618.069-.606.069-.606 1.003.07 1.531 1.032 1.531 1.032.892 1.526 2.341 1.082 2.91.829.091-.642.357-1.082.654-1.333-2.22-.253-4.555-1.11-4.555-4.949 0-1.092.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.025A9.776 9.776 0 0110 4.388c.85.006 1.7.103 2.504.304 1.909-1.293 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65a3.736 3.736 0 011.029 2.682c0 3.84-2.335 4.69-4.565 4.943.37.316.68.921.68 1.852v2.755c0 .268.18.579.688.488C17.137 18.165 20 14.418 20 10A10 10 0 0010 0z" clip-rule="evenodd"></path>
</svg>
Continue with GitHub
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.625c0-2.515 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.453h-1.267c-1.243 0-1.63.771-1.63 1.562V10h2.77l-.443 2.894h-2.327V20A10 10 0 0020 10z"></path>
</svg>
Continue with Facebook
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M19.243 9.243a9.93 9.93 0 00-.02-1.483c-.1-.52-.253-1.026-.458-1.518l-.105-.238a9.964 9.964 0 00-1.014-1.428l-.16-.215-.142-.179A9.986 9.986 0 0010 .009a10 10 0 00-9.24 5.757 9.93 9.93 0 00-.02 1.483c-.1.52-.252 1.027-.457 1.518l-.105.238a9.964 9.964 0 00-1.014 1.428l-.16.215-.142.179A9.986 9.986 0 000 10.009a10 10 0 009.24 5.757 9.93 9.93 0 00.02-1.483c.1-.52.253-1.026.458-1.518l.105-.238a9.964 9.964 0 001.014-1.428l.16-.215.142-.179A9.986 9.986 0 0020 10.009a10 10 0 00-9.24-5.766zM10 14a4 4 0 110-8 4 4 0 010 8z"></path>
</svg>
Continue with Google
</button>
</div>
</div>
</div>Componenti correlati
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 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 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.