CCHub Logo CCHub Tailwind Collection
구성 요소 2단계 인증 2단계 인증

2단계 인증

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

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-yellow-200 dark:bg-purple-800 p-6">
  <div class="bg-white dark:bg-gray-900 border-4 border-black dark:border-yellow-400 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#darpurple-400] p-8 rounded-none max-w-sm w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center font-mono">Verify Your Identity</h2>
    <p class="text-black dark:text-gray-300 mb-6 text-center font-sans">and enter the verification code sent to your phone number.</p>
    <div class="flex justify-center space-x-4 mb-6">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
    </div>
    <button class="w-full bg-purple-500 dark:bg-yellow-400 text-white dark:text-black font-bold py-3 border-4 border-black dark:border-yellow-400 shadow-[5px_5px_0_0_#000] dark:shadow-[5px_5px_0_0_#darpurple-400] hover:bg-purple-600 dark:hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">Verify</button>
    <p class="mt-4 text-center text-black dark:text-gray-300 font-sans">
      Didn't receive a code? <a href="#" class="text-purple-600 dark:text-yellow-400 hover:underline font-mono">Resend Code</a>
    </p>
  </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

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

열다

Two-Factor Authentication 구성 요소

복잡하고 어두운 모드 UI 2단계 인증 구성 요소로, 이벤트/컨퍼런스 웹 사이트에 적합한 음소거된 색상이 있습니다. 코드에 대한 입력 필드, 재전송 및 메서드 변경 옵션, 명확한 클릭 유도문안이 특징입니다.

열다

Two-Factor Authentication 구성 요소

소셜 미디어 애플리케이션을 위한 복잡하고 반응형이 빠른 레트로 테마의 2단계 인증 구성 요소로, Tailwind CSS를 사용하는 다크 모드와 유사한 색 구성표를 사용합니다. 여러 대화형 요소를 포함하며 picsum.photos 및 randomuser.me 의 이미지를 사용합니다.

열다