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

Two-Factor Authentication 구성 요소

마이크로 인터랙션과 파스텔 색상 구성표로 설계된 Two-Factor Authentication Component로, 포트폴리오에서 작업이나 제품을 전시하는 데 적합합니다. 이 구성 요소에는 여러 대화형 요소와 어두운 테마를 지원하는 반응형 디자인이 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
                <input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
            </div>
            <button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
        </form>
        <div class="mt-4 flex items-center justify-between">
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

금융/뱅킹 애플리케이션용으로 설계된 복잡하고 응답성이 뛰어난 2FA(2단계 인증) 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 여기에는 코드에 대한 입력 필드, 재전송 옵션 및 2FA에 대한 설명이 포함됩니다.

열다

Two-Factor Authentication 구성 요소

네온/글로우 생생한 다크 모드 미학을 갖춘 반응형 이중 인증 구성 요소로, 소셜 미디어 애플리케이션에 적합합니다. 숫자에 대한 입력 필드, 코드 재전송 버튼 및 명확한 지침이 있습니다.

열다

Two-Factor Authentication 구성 요소

아르데코 미학으로 스타일링된 2단계 인증 구성 요소는 기하학적 패턴과 포레스트 그린 색상 팔레트를 특징으로 하며 소셜 미디어 애플리케이션에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다