Search Components

Two-Factor Authentication

Additional security layer for authentication

Two-Factor Authentication Component

A simple, responsive two-factor authentication component for e-commerce, with a Skeuomorphic design, triadic color scheme, and dark theme support.

Open Preview

                <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 Component

A simple two-factor authentication component with Material Design aesthetics, analogous color scheme, and responsive dark theme support.

Open Preview

                <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 Component

A two-factor authentication component with a vibrant, simple design. Features microinteractions like subtle button animations and input field transitions. Responsive with dark mode support. Designed for portfolios.

Open Preview

                <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 Component

A minimalist two-factor authentication component designed for a portfolio with a triadic color scheme. It features a clean, interactive interface supporting dark mode, built using Tailwind CSS.

Open Preview

                <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 Component

Open Preview

                <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 Component

Responsive Two-Factor Authentication component with Brutalist design, Triadic color scheme, and Dark theme support for a Dashboard purpose.

Open Preview

                <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 Component

A Two-Factor Authentication Component designed with skeuomorphic style, suitable for e-commerce applications, utilizing a grayscale color scheme and complex interactive elements. It features responsive design and dark mode support using Tailwind CSS.

Open Preview

                <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 Component

A simple two-factor authentication component featuring a vibrant color scheme and 3D design elements suitable for business websites.

Open Preview

                <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>

Two-Factor Authentication

Two-Factor Authentication Component with Brutalist design, Complementary color scheme, and moderate complexity for social media, responsive with dark theme support.

Open Preview

                <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 Component

A simple, responsive two-factor authentication component designed for social media interfaces with a 3D design style and a grayscale color scheme.

Open Preview

                <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>

Search Components

Categories

Two-Factor Authentication