OAuth-Schaltflächen-Komponente
Eine Webkomponente mit OAuth-Schaltflächen mit einem 3D-Designstil, responsiven Effekten, Unterstützung für dunkle Designs und Platzhalterbildern.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
Google
</a>
<a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
Facebook
</a>
<a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
Twitter
</a>
</div>
</div>Verwandte Komponenten
OAuth-Schaltflächen-Komponente
Eine einfache, reaktionsschnelle OAuth-Schaltflächenkomponente im skeuomorphen Stil mit einem lebendigen Farbschema, die auf E-Commerce-Plattformen zugeschnitten ist und den Dunkelmodus unterstützt.
OAuth-Schaltflächen-Komponente
Eine Reihe minimalistischer und lebendiger OAuth-Schaltflächen für eine Portfolio-Website mit mehreren Anbietern, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
OAuth-Schaltflächen-Komponente
Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit dunklem Thema mit triadischem Farbschema und komplexen interaktiven Elementen für Geschäfts-/Unternehmenswebsites.