Two-Factor Authentication 구성 요소
Tailwind CSS를 사용하여 보색, 복잡한 UI, 반응형 디자인 및 다크 모드 지원을 제공하는 소셜 미디어를 위한 스큐어모픽 2단계 인증 구성 요소입니다.
HTML 코드
<div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:rotate-6 sm:rounded-3xl"></div>
<div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white text-center">Two-Factor Authentication</h1>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
<p>Please enter the 6-digit code sent to your registered email or phone number.</p>
<div class="relative">
<input autocomplete="off" id="code" name="code" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:outline-none focus:borer-rose-600" placeholder="Enter code" />
<label for="code" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 dark:peer-focus:text-gray-400 peer-focus:text-sm">Authentication Code</label>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">Haven't received the code? <a href="#" class="text-teal-500 dark:text-teal-400 hover:text-teal-600 dark:hover:text-teal-500">Resend Code</a></p>
</div>
<div class="pt-4 flex items-center space-x-4">
<button class="bg-blue-500 dark:bg-blue-600 text-white rounded-md px-2 py-1 text-sm hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 dark:focus:ring-blue-800">Verify Code</button>
<button class="flex-1 text-center text-gray-600 dark:text-gray-400 text-sm hover:text-gray-800 dark:hover:text-gray-200">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
관련 구성 요소
Two-Factor Authentication 구성 요소
이벤트/컨퍼런스 웹 사이트를 위한 산업 테마의 이중 인증 구성 요소로, 원자재, 노출된 요소 및 유사한 색 구성표를 특징으로 합니다. 반응이 빠르며 다크 모드를 지원합니다.
Two-Factor Authentication 구성 요소
Brutalist 디자인, Triadic 색 구성표 및 대시보드 목적을 위한 어두운 테마 지원을 제공하는 반응형 2단계 인증 구성 요소.
Two-Factor Authentication 구성 요소
생생한 색 구성표와 비즈니스 웹 사이트에 적합한 3D 디자인 요소를 특징으로 하는 간단한 이중 인증 구성 요소입니다.