Components Two-Factor Authentication Two-Factor Authentication Component

Two-Factor Authentication Component

A simple two-factor authentication component designed with glassmorphism style, suitable for e-commerce platforms. It features a monochromatic color scheme and is responsive with support for dark mode.

Preview

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>

Related Components

Two-Factor Authentication Component

A simple, responsive two-factor authentication component designed for social media interfaces with a 3D design style and a grayscale color scheme.

Open

Two-Factor Authentication Component

A two-factor authentication component designed with microinteractions, responsive effects, and dark theme support using Tailwind CSS.

Open

Two-Factor Authentication Component

A complex, responsive, retro-themed Two-Factor Authentication component for social media applications, with a dark mode and analogous color scheme using Tailwind CSS. Includes multiple interactive elements and uses images from picsum.photos and randomuser.me.

Open