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

Zwei-Faktor-Authentifizierungskomponente

Eine einfache Zwei-Faktor-Authentifizierungskomponente, die im Glassmorphism-Stil entwickelt wurde und für E-Commerce-Plattformen geeignet ist. Es verfügt über ein monochromatisches Farbschema und ist reaktionsschnell mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
    <div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
                <input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
        </div>
    </div>
</body>
</html>

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 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 reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente mit 3D-Designelementen und einem triadischen Farbschema, geeignet für einen Blog oder eine Content-Site. Enthält Unterstützung für den Dunkelmodus.

Offen