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

Zwei-Faktor-Authentifizierungskomponente

Eine reaktionsschnelle Zwei-Faktor-Authentifizierungskomponente, die mit Neumorphism in einem lebendigen Farbschema entwickelt wurde, für Unternehmenswebsites geeignet ist und den Dunkelmodus mit Tailwind CSS unterstützt.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Secure your account with an additional layer of protection.</p>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
            <input type="text" id="phone" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter your phone number" />
        </div>
        <div class="mb-6">
            <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 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter the authentication code" />
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Verify</button>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Or</p>
            <a href="#" class="text-blue-500 hover:underline">Use an Authenticator App</a>
        </div>
        <div class="mt-6">
            <img src="https://picsum.photos/200/100" alt="Random image" class="rounded-lg shadow-md dark:shadow-lg" />
        </div>
    </div>
</div>

Verwandte Komponenten

Zwei-Faktor-Authentifizierungskomponente

Eine skeuomorphe Zwei-Faktor-Authentifizierungskomponente für soziale Medien mit Komplementärfarben, komplexer Benutzeroberfläche, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

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

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.

Offen