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 구성 요소
금융/뱅킹 애플리케이션용으로 설계된 복잡하고 응답성이 뛰어난 2FA(2단계 인증) 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 여기에는 코드에 대한 입력 필드, 재전송 옵션 및 2FA에 대한 설명이 포함됩니다.
Two-Factor Authentication 구성 요소
어두운 테마를 지원하는 Tailwind CSS를 사용하는 반응형 2단계 인증 구성 요소입니다. 미니멀리스트/플랫 디자인, 단색 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있는 복잡한 레이아웃이 특징입니다.