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

Zwei-Faktor-Authentifizierungskomponente

Eine Zwei-Faktor-Authentifizierungskomponente, die mit ansprechenden Mikrointeraktionen und einem komplementären Farbschema entwickelt wurde. Es ist reaktionsschnell und unterstützt den Dunkelmodus, der sich für die Präsentation von Arbeiten oder Produkten in einem Portfolio eignet.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email.</p>
            <div class="flex justify-between items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
            </div>
            <form>
                <input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
                <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
            </form>
            <div class="mt-4 flex justify-between">
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Zwei-Faktor-Authentifizierungskomponente

Eine Zwei-Faktor-Authentifizierungskomponente mit skeuomorphem Stil, die für E-Commerce-Anwendungen geeignet ist und ein Graustufen-Farbschema und komplexe interaktive Elemente verwendet. Es bietet responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine minimalistische Zwei-Faktor-Authentifizierungskomponente, die für ein Portfolio mit einem triadischen Farbschema entwickelt wurde. Es verfügt über eine übersichtliche, interaktive Benutzeroberfläche, die den Dunkelmodus unterstützt und mit Tailwind CSS erstellt wurde.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine einfache Zwei-Faktor-Authentifizierungskomponente mit einem lebendigen Farbschema und 3D-Designelementen, die für Unternehmenswebsites geeignet sind.

Offen