CCHub Logo CCHub Tailwind Collection
Komponenten Zwei-Faktor-Authentifizierung Zwei-Faktor-Authentifizierungskomponente

Zwei-Faktor-Authentifizierungskomponente

Eine Zwei-Faktor-Authentifizierungskomponente in einem brutalistischen Design mit Tailwind CSS, mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm p-6 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md rounded-lg flex flex-col">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">
            Please enter the authentication code sent to your email.
        </p>
        <div class="flex flex-col mb-4">
            <label class="text-gray-600 dark:text-gray-400 text-sm mb-2" for="auth-code">Authentication Code</label>
            <input type="text" id="auth-code" class="p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="Enter your code">
        </div>
        <button class="w-full p-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-200">Verify</button>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/50?random=1" alt="Placeholder" class="rounded-full mb-2">
            <span class="text-gray-600 dark:text-gray-400 text-sm">John Doe</span>
        </div>
    </div>
</div>

Verwandte Komponenten

Zwei-Faktor-Authentifizierungskomponente

Eine Zwei-Faktor-Authentifizierungskomponente, die mit Mikrointeraktionen und einem pastellfarbenen Farbschema entwickelt wurde und sich für die Präsentation von Arbeiten oder Produkten in einem Portfolio eignet. Die Komponente enthält mehrere interaktive Elemente und ein responsives Design mit Unterstützung für dunkle Themen.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente mit Tailwind CSS mit Unterstützung für dunkle Themen. Verfügt über ein minimalistisches/flaches Design, ein monochromatisches Farbschema, ein komplexes Layout mit mehreren interaktiven Elementen, die für den E-Commerce geeignet sind.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine einfache, reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente für den E-Commerce mit einem skeuomorphen Design, einem triadischen Farbschema und Unterstützung für dunkle Themen.

Offen