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

Two-Factor Authentication 구성 요소

3D 디자인 요소와 트라이어딕 색 구성표를 갖춘 반응형 2단계 인증 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
    <h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
    <p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
  </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 브루탈리즘 디자인 스타일의 2단계 인증 구성 요소로, 반응형 효과와 어두운 테마 지원이 특징입니다.

열다

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 마이크로 상호 작용, 반응형 효과 및 어두운 테마 지원으로 설계된 2단계 인증 구성 요소입니다.

열다

Two-Factor Authentication 구성 요소

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

열다