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

Zwei-Faktor-Authentifizierungskomponente

Eine einfache, reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente, die für Social-Media-Schnittstellen mit einem 3D-Designstil und einem Graustufen-Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Two-Factor Authentication</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
            <input type="text" id="code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your code" required />
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
        </div>
        <button class="w-full bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 font-semibold py-2 rounded-md shadow-md focus:outline-none hover:bg-gray-700 dark:hover:bg-gray-600">Verify</button>
    </div>
</div>

Verwandte Komponenten

Zwei-Faktor-Authentifizierungskomponente

Zwei-Faktor-Authentifizierungskomponente

Offen

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

Ein einfaches und sauberes Komponentendesign für die Zwei-Faktor-Authentifizierung mit Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen