구성 요소 2단계 인증 Two-Factor Authentication 구성 요소

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 미니멀리스트 2단계 인증 구성 요소입니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered email.</p>
        <div class="flex justify-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/men/5.jpg" alt="avatar">
        </div>
        <div class="mb-4">
            <input type="text" placeholder="Enter Code" class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        </div>
        <div class="flex justify-between items-center mb-4">
            <button class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-400 transition duration-300">Verify</button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">Didn't receive the code? <a href="#" class="text-blue-500 hover:underline">Resend</a></p>
        </div>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하는 반응형 2단계 인증 구성 요소입니다. 미니멀리스트/플랫 디자인, 단색 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있는 복잡한 레이아웃이 특징입니다.

열다

Two-Factor Authentication 구성 요소

레트로/빈티지 2단계 인증 컴포넌트는 반응형 디자인과 다크 모드를 지원합니다.

열다