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

Two-Factor Authentication 구성 요소

스큐어모픽 스타일로 설계된 Two-Factor Authentication Component로, 전자 상거래 애플리케이션에 적합하며 회색조 색 구성표와 복잡한 대화형 요소를 사용합니다. Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원이 특징입니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email to proceed with your purchase.</p>
        <div class="flex items-center mb-4">
            <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
        <label class="block mb-2 text-gray-700 dark:text-gray-300 font-medium" for="verification-code">Verification Code:</label>
        <input type="text" id="verification-code" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="Enter your code" required />
        <button class="mt-4 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200">Verify</button>
        <div class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">
            <p>Didn’t receive a code? <a href="#" class="text-gray-800 dark:text-gray-200 font-semibold">Resend</a></p>
        </div>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

미니멀한 2단계 인증 구성 요소는 트라이어딕 색 구성표가 있는 포트폴리오를 위해 설계되었습니다. Tailwind CSS를 사용하여 구축된 다크 모드를 지원하는 깔끔한 대화형 인터페이스가 특징입니다.

열다

Two-Factor Authentication 구성 요소

매력적인 마이크로 인터랙션과 보색으로 설계된 Two-Factor Authentication 구성 요소입니다. 반응형이며 다크 모드를 지원하여 포트폴리오에서 작업이나 제품을 표시하는 데 적합합니다.

열다