검색 구성 요소

카테고리

구성 요소 2단계 인증

2단계 인증

인증을 위한 추가 보안 계층

Two-Factor Authentication 구성 요소

그라데이션 무지개 액센트가 있는 간단한 산업 테마의 이중 인증 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 반응성 및 다크 모드 지원이 특징입니다.

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <div class="flex items-center justify-center mb-4">
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-600 dark:via-yellow-600 dark:to-green-600 rounded-full flex items-center justify-center shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
          </svg>
        </div>
      </div>
      <h2 class="text-2xl font-extrabold text-center text-gray-900 dark:text-gray-100 uppercase tracking-wide">Two-Factor Authentication</h2>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
        Please enter the 6-digit code from your authenticator app.
      </p>
      <form class="space-y-4">
        <div class="flex justify-center space-x-2">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 1" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 2" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 3" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 4" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 5" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 6" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
        </div>
        <button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-semibold shadow-md
        bg-gradient-to-r from-purple-600 via-pink-500 to-red-500
        hover:from-purple-700 hover:via-pink-600 hover:to-red-600
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
        dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out text-lg">
          Verify Code
        </button>
      </form>
      <div class="text-center">
        <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
          Having trouble? Try another method
        </a>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

네온/글로우 생생한 다크 모드 미학을 갖춘 반응형 이중 인증 구성 요소로, 소셜 미디어 애플리케이션에 적합합니다. 숫자에 대한 입력 필드, 코드 재전송 버튼 및 명확한 지침이 있습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-950">
  <div class="relative w-full max-w-md p-8 overflow-hidden rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-indigo-500/20 to-purple-700/20 dark:from-indigo-900/30 dark:to-purple-900/30 shadow-2xl transition-all duration-300 transform scale-95 hover:scale-100 ring-2 ring-purple-500 dark:ring-indigo-700">
    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-0 -right-4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-center">
      <h2 class="text-4xl font-extrabold mb-4 text-white drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] dark:drop-shadow-[0_0_8px_rgba(129,140,248,0.8)] sm:text-5xl">
        Verify Your Account
      </h2>
      <p class="text-lg mb-8 text-indigo-200 dark:text-indigo-300">
        Enter the 6-digit code sent to your email or phone.
      </p>

      <form class="space-y-6">
        <div class="flex justify-center gap-x-3 sm:gap-x-4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 1">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 2">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 3">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 5">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 6">
        </div>

        <button type="submit" class="w-full py-3 px-6 rounded-lg text-xl font-semibold text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-950 transition-all duration-300 shadow-lg neon-button">
          Verify Code
        </button>

        <p class="text-center text-white/80 dark:text-indigo-300 text-base sm:text-lg mt-4">
          Didn't receive the code?
          <a href="#" class="font-medium text-pink-400 hover:text-pink-300 dark:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-950 focus:ring-2 focus:ring-pink-400 focus:outline-none rounded-md">
            Resend Code
          </a>
        </p>
      </form>
    </div>
  </div>
</div>

<style>
  /* This is for the custom animation and glow effects */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  .glow-input {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.5), inset 0 0 5px rgba(168, 85, 247, 0.5);
  }

  .dark .glow-input {
    box-shadow: 0 0 5px rgba(129, 140, 248, 0.6), inset 0 0 5px rgba(129, 140, 248, 0.6);
  }

  .glow-input:focus {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), inset 0 0 10px rgba(168, 85, 247, 0.8), 0 0 0 4px rgba(168,85,247,0.4);
  }

  .dark .glow-input:focus {
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.9), inset 0 0 10px rgba(129, 140, 248, 0.9), 0 0 0 4px rgba(129,140,248,0.5);
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(168,85,247,0.6);
  }

  .neon-button:hover {
    box-shadow: 0 0 25px rgba(168,85,247,0.8), 0 0 40px rgba(168,85,247,0.4);
  }

  .dark .neon-button {
      box-shadow: 0 0 15px rgba(129,140,248,0.7);
  }

  .dark .neon-button:hover {
      box-shadow: 0 0 25px rgba(129,140,248,0.9), 0 0 40px rgba(129,140,248,0.5);
  }
</style>

Two-Factor Authentication 구성 요소

바다/파란색 그라데이션과 부드러운 전환으로 설계된 복잡하고 반응이 빠른 2FA(Two-Factor Authentication) 구성 요소로, 뉴스 웹 사이트 및 미디어 매체에 적합합니다. 다크 모드 지원과 풍부한 대화형 인터페이스가 포함되어 있습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 ease-in-out group hover:shadow-2xl dark:shadow-blue-900/50 border border-blue-50/50 dark:border-blue-900 relative">

    <!-- Background Blob/Gradient Effect -->
    <div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-blue-700 dark:to-blue-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-br from-cyan-400 to-sky-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-2000 animate-blob dark:from-sky-700 dark:to-teal-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-4000 animate-blob dark:from-purple-700 dark:to-fuchsia-900 transition-all duration-500 ease-in-out"></div>

    <div class="p-8 sm:p-10 relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 transform transition-all duration-500 ease-in-out group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-4 leading-tight group-hover:text-amber-500 dark:group-hover:text-indigo-400 transition-colors duration-500 ease-in-out">
          Two-Factor Authentication
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Please enter the 6-digit code sent to your device.
        </p>
      </div>

      <form action="#" method="POST">
        <div class="space-y-6">
          <div class="flex justify-center space-x-2 sm:space-x-4">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <span class="h-full w-2 sm:w-4 flex items-center justify-center text-gray-400 dark:text-gray-500 text-4xl">-</span>
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
          </div>

          <button type="submit" class="w-full flex justify-center py-4 px-6 border border-transparent rounded-full shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 dark:from-blue-700 dark:to-blue-900 dark:hover:from-blue-600 dark:hover:to-blue-800 dark:focus:ring-blue-700 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group-hover:shadow-2xl group-hover:shadow-blue-500/40 dark:group-hover:shadow-blue-900/60">
            Verify Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Didn't receive the code?
        </p>
        <p>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Resend Code
          </a>
          <span class="mx-2 text-gray-400 dark:text-gray-600">•</span>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Use another method
          </a>
        </p>

        <div class="mt-8 pt-6 border-t border-blue-100 dark:border-blue-900/50 transition-colors duration-500 ease-in-out">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            Having trouble? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">Contact Support</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the blob animation - Tailwind CSS doesn't support complex keyframe animations directly */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Styles for input focus/auto-tabbing - requires JS for full functionality, but basic styling can be here */
  .space-x-2 > input:focus, .space-x-4 > input:focus {
    outline: none !important; /* Remove default outline */
  }
</style>

Two-Factor Authentication 구성 요소

3D 디자인 미학, 차분한 색 구성표 및 다크 모드를 지원하는 반응형 이중 인증 구성 요소입니다. 확인 코드와 재전송 옵션에 대한 입력 필드가 있습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform perspective-1000 rotate-x-6 rotate-y-3 transition-all duration-300 hover:rotate-x-0 hover:rotate-y-0 hover:shadow-3xl flex flex-col items-center border border-gray-200 dark:border-gray-600">
    <div class="bg-blue-200 dark:bg-blue-600 rounded-full p-4 mb-6 shadow-md transform translate-z-20">
      <svg class="w-12 h-12 text-blue-800 dark:text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z" />
      </svg>
    </div>
    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 text-center transform translate-z-10">
      2-Step Verification
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center transform translate-z-5">
      Please enter the 6-digit code sent to your email address or phone number.
    </p>

    <div class="flex space-x-3 sm:space-x-4 mb-6 transform translate-z-10">
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
    </div>

    <button class="w-full py-3 px-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg transform translate-z-15 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-700 mb-4">
      Verify Code
    </button>

    <p class="text-sm text-gray-500 dark:text-gray-400 transform translate-z-5">
      Didn't receive the code? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200">Resend Code</a>
    </p>
  </div>
</div>

Two-Factor Authentication 구성 요소

금융/뱅킹 애플리케이션용으로 설계된 복잡하고 응답성이 뛰어난 2FA(2단계 인증) 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 여기에는 코드에 대한 입력 필드, 재전송 옵션 및 2FA에 대한 설명이 포함됩니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 flex flex-col items-center text-center">
      <div class="mb-6">
        <svg class="w-16 h-16 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-3">Two-Factor Authentication</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed mb-6">
        For your security, we've sent a 6-digit verification code to your registered mobile device.
        Please enter it below to continue.
      </p>

      <div class="w-full space-y-4">
        <label for="verification-code" class="sr-only">Verification Code</label>
        <div class="flex justify-center space-x-2 sm:space-x-3">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 1 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 2 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 3 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 4 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 5 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 6 of verification code">
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 font-semibold shadow-md hover:bg-gray-800 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 dark:focus:ring-gray-100 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Verify Code
        </button>
      </div>

      <div class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Didn't receive the code? 
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors duration-200">
          Resend Code
        </a>
      </div>

      <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 w-full text-left">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">What is 2FA?</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
          Two-Factor Authentication (2FA) adds an extra layer of security to your account.
          It requires both your password and a second piece of information (like a code from your phone)
          to verify your identity before granting access.
        </p>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mt-2">
          This protects your account even if your password is stolen.
        </p>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48"
          src="https://picsum.photos/400/500?grayscale&blur=5"
          alt="Abstract geometric pattern">
      </div>
      <div class="p-6 md:p-8 flex-1">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
          <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
            </path>
          </svg>
        </div>

        <p class="text-gray-300 mb-6 text-sm md:text-base">
          A security code has been sent to your registered email address.
          Please enter it below to complete your login.
        </p>

        <form>
          <div class="grid grid-cols-6 gap-3 mb-6">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
          </div>

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
              Code</a>
            <span class="text-gray-400 hidden sm:inline-block">•</span>
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
              Authentication Method</a>
          </div>

          <button type="submit"
            class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
            Verify
          </button>
        </form>

        <p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
          Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

이벤트/컨퍼런스 웹 사이트를 위한 산업 테마의 이중 인증 구성 요소로, 원자재, 노출된 요소 및 유사한 색 구성표를 특징으로 합니다. 반응이 빠르며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">

  <!-- Main Card Container -->
  <div class="bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">

    <!-- Header Section -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-6 sm:p-8 border-b-2 border-zinc-300 dark:border-zinc-600 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/800/400?grayscale')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
      <div class="relative z-10 flex items-center mb-4">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-orange-600 dark:text-orange-400 mr-3 transform -rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.335 5.965 3.129 8.243a12.003 12.003 0 0017.95-8.243c0-3.072-1.335-5.965-3.129-8.243z"></path>
        </svg>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Two-Factor Authentication</h2>
      </div>
      <p class="text-sm sm:text-base text-zinc-700 dark:text-zinc-300 max-w-md">
        For enhanced security, please enter the 6-digit code sent to your registered device.
      </p>
    </div>

    <!-- Body Section - OTP Input -->
    <div class="p-6 sm:p-8">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 object-cover">
        <div>
          <p class="text-sm text-zinc-700 dark:text-zinc-300">Verifying access for:</p>
          <p class="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Olivia Davis</p>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="otp-code" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Enter your 6-digit code</label>
          <div class="flex justify-center space-x-2 md:space-x-3">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" autocomplete="one-time-code" pattern="\d*">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <span class="flex items-center text-zinc-400 dark:text-zinc-500 text-3xl font-light mx-1 md:mx-2">-</span>
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
          </div>
        </div>

        <p class="text-sm text-center text-red-600 dark:text-red-400 mt-4" role="alert" aria-live="polite" id="error-message" style="display:none;">Invalid code. Please try again.</p>

        <div class="flex flex-col sm:flex-row sm:justify-between sm:space-x-4 space-y-4 sm:space-y-0">
          <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Verify Code
          </button>
          <button type="button" class="w-full sm:w-auto px-6 py-3 bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-600 dark:hover:bg-zinc-500 text-zinc-800 dark:text-zinc-200 font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Resend Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-zinc-600 dark:text-zinc-400">
          Need help? <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Contact Support</a> or <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Change Method</a>.
        </p>
      </div>
    </div>

    <!-- Footer Section (optional, for additional info) -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-4 sm:p-5 border-t-2 border-zinc-300 dark:border-zinc-600 text-center">
      <p class="text-xs text-zinc-500 dark:text-zinc-400">Your security is our priority. © 2023 Acme Events.</p>
    </div>

  </div>
</div>

<!-- Script for automatic focus and potential error display (purely illustrative, would need JS in a real app) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][type="text"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.data && e.data.match(/\d/)) { // Allow only digits
          if (index < inputs.length - 1) {
            inputs[index + 1].focus();
          }
        } else if (e.inputType === 'deleteContentBackward') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        } else {
          input.value = ''; // Clear non-digit input
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && input.value === '') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        }
      });
    });

    // Example of showing an error message (would be triggered by backend validation)
    // const errorMessage = document.getElementById('error-message');
    // document.querySelector('form').addEventListener('submit', (e) => {
    //   e.preventDefault();
    //   errorMessage.style.display = 'block'; // Or 'none' on success
    //   setTimeout(() => errorMessage.style.display = 'none', 3000); // Hide after a few seconds
    // });
  });
<\/script>

Two-Factor Authentication 구성 요소

종이/인쇄물에서 영감을 받은 디자인, 밝은 액센트가 있는 흑백 색 구성표를 갖춘 간단하고 반응이 빠른 이중 인증 구성 요소로, 포럼/커뮤니티 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 font-serif">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-102 hover:shadow-2xl relative
              before:content-[''] before:absolute before:inset-0 before:bg-[url('https://www.transparenttextures.com/patterns/clean-paper-light.png')] dark:before:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] before:opacity-20 before:pointer-events-none">

    <!-- Page Curl / Fold Accent -->
    <div class="absolute top-0 right-0 w-0 h-0 border-l-[30px] border-b-[30px] border-solid border-white dark:border-gray-800 border-t-accent-500 border-r-accent-500 rounded-bl-lg dark:border-opacity-30" style="border-bottom-color: transparent; border-left-color: transparent;"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-white leading-tight break-words">
        Two-Factor Authentication
      </h2>
      <p class="text-gray-600 dark:text-gray-300 mb-6 text-base sm:text-lg leading-relaxed break-words">
        Enter the 6-digit code from your authenticator app to complete your login.
      </p>

      <form>
        <div class="mb-6">
          <label for="auth_code" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 invisible h-0 w-0 absolute">Verification Code</label>
          <div class="flex space-x-2 sm:space-x-4 justify-center">
            <input type="text" id="code_digit_1" name="code_digit_1" maxlength="1" inputmode="numeric" pattern="[0-9]" autofocus
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_2" name="code_digit_2" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_3" name="code_digit_3" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <span class="flex items-center text-gray-400 dark:text-gray-500 text-3xl font-semibold print:text-gray-700 rotate-180 print:rotate-0">-</span>
            <input type="text" id="code_digit_4" name="code_digit_4" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_5" name="code_digit_5" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_6" name="code_digit_6" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
          </div>
        </div>

        <button type="submit"
                class="w-full py-3 px-4 rounded-lg bg-accent-500 text-white font-semibold text-lg
                       hover:bg-accent-600 focus:outline-none focus:ring-4 focus:ring-accent-300 focus:ring-opacity-75
                       transition duration-200 ease-in-out shadow-md dark:shadow-lg dark:hover:bg-accent-400
                       print:bg-gray-800 print:text-white print:hover:bg-gray-900 print:shadow-none">
          Verify Code
        </button>
      </form>

      <div class="mt-6 text-center text-sm sm:text-base">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-accent-500 dark:hover:text-accent-400 transition duration-150 print:text-gray-800 print:underline print:hover:text-gray-900">
          Can't access your authenticator? 
          <span class="font-medium underline">Reset 2FA</span>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is to define the accent color from the instructions */
  :root {
    --color-accent-500: #FF4500; /* Example: OrangeRed */
    --color-accent-600: #E03E00;
    --color-accent-300: #FF7B33;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-accent-400: #FF6600; /* Slightly lighter for better contrast in dark mode */
    }
  }

  .bg-accent-500 { background-color: var(--color-accent-500); }
  .hover\:bg-accent-600:hover { background-color: var(--color-accent-600); }
  .focus\:ring-accent-300:focus { --tw-ring-color: var(--color-accent-300); }
  .text-accent-500 { color: var(--color-accent-500); }
  .hover\:text-accent-500:hover { color: var(--color-accent-500); }
  .focus\:border-accent-500:focus { border-color: var(--color-accent-500); }
  .focus\:ring-accent-500:focus { --tw-ring-color: var(--color-accent-500); }

  .dark .hover\:bg-accent-400:hover { background-color: var(--color-accent-400); }
  .dark .hover\:text-accent-400:hover { color: var(--color-accent-400); }

  /* Custom styling for the top-right corner fold to use accent color */
  .border-t-accent-500 { border-top-color: var(--color-accent-500); }
  .border-r-accent-500 { border-right-color: var(--color-accent-500); }

  /* For digit inputs, ensure they stay centered and are easily tabbable */
  input[type="text"][maxlength="1"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
</style>

<!-- Script for auto-focusing and handling digit input -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][inputmode="numeric"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.target.value.length === 1 && index < inputs.length - 1) {
          inputs[index + 1].focus();
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && e.target.value.length === 0 && index > 0) {
          inputs[index - 1].focus();
        }
      });

      // Simple number validation for non-numeric input
      input.addEventListener('beforeinput', (e) => {
        if (e.data && !/^[0-9]$/.test(e.data)) {
          e.preventDefault();
        }
      });
    });
  });
</script>

Two-Factor Authentication 구성 요소

아르데코 미학으로 스타일링된 2단계 인증 구성 요소는 기하학적 패턴과 포레스트 그린 색상 팔레트를 특징으로 하며 소셜 미디어 애플리케이션에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <div class="text-center mt-8 mb-4">
      <svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
      </svg>
      <h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
      <p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <form class="space-y-6">
      <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
          </svg>
          Verify Code
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
        Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
      </p>
      <p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
        <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
      </p>
    </div>
  </div>
</div>


<style>
  /* This is an optional style for better visual of Art Deco inputs, 
     though the core design is pure Tailwind */
  .ArtDecoInput {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* This clip-path attempts a more geometric shape; 
       Adjust values for desired effect. Pure CSS for complex shapes is limited. */
    /* For simpler rounded squares, remove clip-path */
  }
  .dark .ArtDecoInput {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  }
</style>

Two-Factor Authentication 구성 요소

Glassmorphism Two-Factor Authentication Component for Dashboard(보색 구성표 및 다크 모드 지원).

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-dark to-purple-light dark:from-gray-900 dark:to-black">
  <div class="relative p-8 rounded-xl shadow-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-opacity-20 border-white max-w-md w-full mx-4">
    <div class="absolute inset-0 bg-white bg-opacity-5 dark:bg-black dark:bg-opacity-5 rounded-xl pointer-events-none"></div>
    
    <h2 class="text-3xl font-bold text-white mb-6 text-center">🔐 Two-Factor Authentication</h2>
    
    <p class="text-white text-opacity-80 mb-8 text-center">Please enter the 6-digit code from your authenticator app.</p>
    
    <div class="flex justify-center space-x-4 mb-8">
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
    </div>
    
    <button class="w-full py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-70 dark:bg-purple-700 dark:hover:bg-purple-800">
      Verify Code
    </button>
    
    <p class="text-white text-opacity-70 text-center mt-6 text-sm">
      Didn