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

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
                <input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
            </div>
            <button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
        </form>
        <div class="mt-4 flex items-center justify-between">
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
    </div>
</div>

Verwandte Komponenten

Zwei-Faktor-Authentifizierungskomponente

Eine reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente, die im Dunkelmodus mit Graustufenfarben entwickelt wurde und sich für den Konsum von Blogs oder Inhalten eignet.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine komplexe, reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente im Retro-Stil für Social-Media-Anwendungen mit einem Dunkelmodus und einem analogen Farbschema unter Verwendung von Tailwind CSS. Enthält mehrere interaktive Elemente und verwendet Bilder aus picsum.photos und randomuser.me.

Offen

Zwei-Faktor-Authentifizierungskomponente

Eine komplexe, reaktionsschnelle Zwei-Faktor-Authentifizierung (2FA)-Komponente, die mit ozean-/blauen Farbverläufen und fließenden Übergängen entwickelt wurde und sich für Nachrichten-Websites und Medien eignet. Enthält Unterstützung für den Dunkelmodus und eine umfangreiche interaktive Benutzeroberfläche.

Offen