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

Two-Factor Authentication 구성 요소

반응형 2단계 인증 구성 요소는 블로그 또는 콘텐츠 소비에 적합한 회색조를 사용하여 어두운 모드에서 설계되었습니다.

미리 보기

HTML 코드

<div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

생생하고 단순한 디자인의 2단계 인증 구성 요소입니다. 미묘한 버튼 애니메이션 및 입력 필드 전환과 같은 마이크로 상호 작용이 특징입니다. 다크 모드 지원으로 반응형. 포트폴리오를 위한 설계.

열다

2단계 인증

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

열다

Two-Factor Authentication 구성 요소

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

열다