SocialLogin-Komponente
Eine reaktionsschnelle Social-Login-Komponente, die mit Tailwind CSS erstellt wurde und subtile Hover-Mikrointeraktionen und vollständige Unterstützung des Dunkelmodus bietet. Verwendet CDN mit einfachen Symbolen für Social-Media-Logos.
HTML-Code
<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
Sign in with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
Sign in with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
Sign in with Twitter
</button>
</div>
</div>Verwandte Komponenten
Social-Login-Komponente
Eine einfache Social-Login-Komponente mit einem skeuomorphen Design, Erdtönen und einem responsiven Layout mit Unterstützung für den Dunkelmodus. Diese Komponente eignet sich für Blog- oder Content-Konsum-Websites und bietet ein visuell ansprechendes und benutzerfreundliches Anmeldeerlebnis.
Social-Login-Komponente
Eine reaktionsschnelle Social-Login-Komponente, die für den Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde. Geeignet für den Konsum von Blogs und Inhalten mit interaktiven Funktionen.
Social-Login-Komponente
Eine komplexe, reaktionsschnelle Social-Login-Komponente, die für Dashboards entwickelt wurde. Verwendet eine Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema. Verfügt über Schaltflächen für soziale Anbieter, ein E-Mail-/Passwort-Formular, einen "Remember me"-Schalter und ein Trennzeichen mit alternativen Anmeldeoptionen. Vollständig reaktionsschnell mit Bildillustration und verwendet Tailwind CSS mit dem Präfix dark: für die Unterstützung des dunklen Designs. Kein JavaScript erforderlich.