CCHub Logo CCHub Tailwind Collection
구성 요소 2단계 인증 Two-Factor Authentication 구성 요소

Two-Factor Authentication 구성 요소

전자 상거래 플랫폼에 적합한 glassmorphism 스타일로 설계된 간단한 2단계 인증 구성 요소입니다. 단색 색 구성표가 특징이며 다크 모드를 지원하여 반응합니다.

미리 보기

HTML 코드 

<!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>

관련 구성 요소

Two-Factor Authentication 구성 요소

소셜 미디어 애플리케이션을 위한 복잡하고 반응형이 빠른 레트로 테마의 2단계 인증 구성 요소로, Tailwind CSS를 사용하는 다크 모드와 유사한 색 구성표를 사용합니다. 여러 대화형 요소를 포함하며 picsum.photos 및 randomuser.me 의 이미지를 사용합니다.

열다

Two-Factor Authentication 구성 요소

Brutalist 디자인, Triadic 색 구성표 및 대시보드 목적을 위한 어두운 테마 지원을 제공하는 반응형 2단계 인증 구성 요소.

열다

Two-Factor Authentication 구성 요소

반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 간단하고 깨끗한 이중 인증 구성 요소 디자인입니다.

열다