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

Two-Factor Authentication 구성 요소

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

미리 보기

HTML 코드

<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-black">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 p-8 rounded-none shadow-2xl w-full max-w-md">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white uppercase">Two-Factor Authentication</h2>
        <p class="mb-6 text-gray-700 dark:text-gray-300">Please enter the code sent to your device.</p>
        <div class="flex space-x-4 mb-6">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
        </div>
        <button class="w-full bg-red-500 dark:bg-red-700 text-white dark:text-black font-bold py-4 px-6 border-4 border-black dark:border-gray-700 rounded-none uppercase text-xl hover:bg-red-700 dark:hover:bg-red-600 transition duration-300">Verify Code</button>
        <p class="mt-6 text-center text-sm text-gray-700 dark:text-gray-300"><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a> or <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Use another method</a></p>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

Two-Factor Authentication 구성 요소

열다

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

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

열다