CCHub Logo CCHub Tailwind Collection
Komponenten OAuth-Schaltflächen OAuth-Schaltflächen-Komponente

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen, die mit einem skeuomorphen Stil gestaltet sind, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
    <div class="grid grid-cols-1 gap-4">
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Eine Reihe von OAuth-Schaltflächen, die mit einer brutalistischen Ästhetik und Tailwind CSS gestaltet sind, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

OAuth-Schaltflächenkomponente (Dunkelmodus, monochromatisch)

Responsive OAuth Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verwendet ein monochromatisches Farbschema mit dunklem Hintergrund.

Offen

OAuth-Schaltflächen-Komponente

Eine OAuth Buttons-Komponente im Neumorphism-Stil, die für einen Blog oder eine Plattform zum Konsum von Inhalten entwickelt wurde. Die Komponente verfügt über Schaltflächen für verschiedene OAuth-Anbieter mit responsivem Design, Unterstützung für dunkle Themen und einem monochromatischen Farbschema.

Offen