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

OAuth-Schaltflächen-Komponente

Responsive OAuth-Schaltflächenkomponente für die E-Commerce-Benutzeroberfläche im Dunkelmodus mit Pastellfarbschema.

Vorschau

HTML-Code 

```html

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4">

  <div class="w-full max-w-sm">

    <h2 class="text-2xl font-bold text-center text-gray-200 mb-6">Sign In</h2>



    <button class="w-full bg-blue-300 text-blue-900 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-blue-400 transition duration-300">

      <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" class="mr-2">

      Sign in with Google

    </button>



    <button class="w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-gray-400 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/000000/github.png" alt="GitHub Icon" class="mr-2 dark:filter dark:invert">

      Sign in with GitHub

    </button>



    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-blue-600 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/ffffff/facebook-new.png" alt="Facebook Icon" class="mr-2">

      Sign in with Facebook

    </button>

  </div>

</div>

```

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen mit einem 3D-Designstil, responsiven Effekten, Unterstützung für dunkle Designs und Platzhalterbildern.

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 reaktionsschnelle OAuth-Schaltflächenkomponente mit einem 3D-Designstil, Unterstützung für dunkle Designs und Platzhalterbildern. Die Komponente verfügt über Schaltflächen für Google, Facebook, Twitter und LinkedIn mit Hover-Effekten für Tiefe und Engagement.

Offen