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 구성 요소

소셜 미디어 인터페이스에 적합한 흙색의 레트로 스타일로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소입니다.

열다

2단계 인증

브루탈리즘 디자인, 보색 구성표 및 소셜 미디어를 위한 적당한 복잡성을 갖춘 이중 인증 구성 요소, 어두운 테마 지원으로 반응합니다.

열다

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 보색, 복잡한 UI, 반응형 디자인 및 다크 모드 지원을 제공하는 소셜 미디어를 위한 스큐어모픽 2단계 인증 구성 요소입니다.

열다