검색 구성 요소

카테고리

구성 요소 2단계 인증

2단계 인증

인증을 위한 추가 보안 계층

Two-Factor Authentication 구성 요소

전자 상거래를 위한 간단하고 반응이 빠른 2단계 인증 구성 요소로, 스큐어모픽 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 제공합니다.

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
    </div>

    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
    </div>

    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
      Verify Code
    </button>

    <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
      Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
    </p>
  </div>
</div>

Two-Factor Authentication 구성 요소

Material Design 미학, 유사한 색 구성표 및 반응형 어두운 테마 지원을 제공하는 간단한 이중 인증 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 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-cyan-400 to-light-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-gray-100">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <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 device.</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-gray-100 focus:outline-none focus:borer-rose-600"
                placeholder="XXXXXX"
                maxlength="6"
              />
              <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-440 peer-placeholder-shown:top-2 transition-all"
                >Verification Code</label
              >
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
          </div>
          <div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
            <button
              class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
            >
              Verify
            </button>
            <a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
              >Resend Code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
      Two-Factor Authentication
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form class="space-y-6" action="#" method="POST">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Enter your 6-digit code
          </label>
          <div class="mt-1">
            <input id="code" name="code" type="text" autocomplete="one-time-code" required
                   class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm
                          bg-white dark:bg-gray-900 text-gray-900 dark:text-white
                          transition duration-300 ease-in-out transform hover:scale-105">
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Verify
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
              Or
            </span>
          </div>
        </div>

        <div class="mt-6">
          <button type="button"
                  class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-500 dark:hover:bg-gray-700
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Resend Code
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

미니멀한 2단계 인증 구성 요소는 트라이어딕 색 구성표가 있는 포트폴리오를 위해 설계되었습니다. Tailwind CSS를 사용하여 구축된 다크 모드를 지원하는 깔끔한 대화형 인터페이스가 특징입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 space-y-4">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400">To enhance the security of your account, please enter the verification code sent to your email.</p>
        <div class="flex flex-col space-y-4">
            <input type="text" placeholder="Verification Code" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" />
            <div class="flex items-center justify-between">
                <button class="w-full bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-500 text-white font-semibold rounded-md p-2 transition duration-200">Verify</button>
            </div>
            <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
                <a href="#" class="hover:underline">Resend Code</a>
                <a href="#" class="hover:underline">Need Help?</a>
            </div>
        </div>
        <div class="flex flex-col items-center space-y-2">
            <img src="https://picsum.photos/50/50" alt="Random User" class="rounded-full border-2 border-gray-200 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-gray-300">Username: johndoe</span>
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-sm text-center text-gray-600 dark:text-gray-300 mb-6">Enter the 6-digit code from your authenticator app.</p>
    <div class="flex justify-center space-x-4 mb-6">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Verify Code</button>
    <p class="text-sm text-center mt-4 text-gray-600 dark:text-gray-300">Can't find your code? <a href="#" class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</a></p>
  </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <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 Component로, 전자 상거래 애플리케이션에 적합하며 회색조 색 구성표와 복잡한 대화형 요소를 사용합니다. Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원이 특징입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email to proceed with your purchase.</p>
        <div class="flex items-center mb-4">
            <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
        <label class="block mb-2 text-gray-700 dark:text-gray-300 font-medium" for="verification-code">Verification Code:</label>
        <input type="text" id="verification-code" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="Enter your code" required />
        <button class="mt-4 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200">Verify</button>
        <div class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">
            <p>Didn’t receive a code? <a href="#" class="text-gray-800 dark:text-gray-200 font-semibold">Resend</a></p>
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 transform hover:scale-105 transition-transform duration-300 ease-in-out">
        <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-400 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-4">Please enter the verification code sent to your email:</p>
        <form class="mt-4">
            <input type="text" placeholder="Verification Code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" />
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-lg shadow hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-200 ease-in-out">Verify</button>
        </form>
        <div class="flex justify-between mt-6">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Need Help?</a>
        </div>
    </div>
</div>

2단계 인증

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

열다 미리 보기

                <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 구성 요소

소셜 미디어용으로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소는 3D 디자인 스타일과 회색조 색 구성표와 인터페이스합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Two-Factor Authentication</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
            <input type="text" id="code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your code" required />
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
        </div>
        <button class="w-full bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 font-semibold py-2 rounded-md shadow-md focus:outline-none hover:bg-gray-700 dark:hover:bg-gray-600">Verify</button>
    </div>
</div>