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

Two-Factor Authentication 구성 요소

생생한 색 구성표와 비즈니스 웹 사이트에 적합한 3D 디자인 요소를 특징으로 하는 간단한 이중 인증 구성 요소입니다.

미리 보기

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 shadow-2xl rounded-lg p-8 transform hover:scale-105 transition-transform duration-300 ease-in-out">
        <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-400 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-4">Please enter the verification code sent to your email:</p>
        <form class="mt-4">
            <input type="text" placeholder="Verification Code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" />
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-lg shadow hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-200 ease-in-out">Verify</button>
        </form>
        <div class="flex justify-between mt-6">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Need Help?</a>
        </div>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

생생한 색 구성표에서 Neumorphism으로 설계된 반응형 2단계 인증 구성 요소로, 비즈니스 웹 사이트에 적합하고 Tailwind CSS로 다크 모드를 지원합니다.

열다