Two-Factor Authentication

Two-Factor Authentication Component

A complex, responsive, retro-themed Two-Factor Authentication component for social media applications, with a dark mode and analogous color scheme using Tailwind CSS. Includes multiple interactive elements and uses images from picsum.photos and randomuser.me.

Open Preview

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
    </div>
    
    <form>
      <div class="flex space-x-4 mb-6">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
      </div>
      
      <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
    </form>
    
    <div class="mt-6 text-center">
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
      <span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
    </div>
    
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
      <img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
    </div>
  </div>
</div>

Two-Factor Authentication Component

A simple two-factor authentication component designed with glassmorphism style, suitable for e-commerce platforms. It features a monochromatic color scheme and is responsive with support for dark mode.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
    <div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
                <input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
        </div>
    </div>
</body>
</html>

Two-Factor Authentication Component

A responsive Two-Factor Authentication component designed with Neumorphism in a vibrant color scheme, suitable for business websites and supporting dark mode with Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Secure your account with an additional layer of protection.</p>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
            <input type="text" id="phone" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter your phone number" />
        </div>
        <div class="mb-6">
            <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 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter the authentication code" />
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Verify</button>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Or</p>
            <a href="#" class="text-blue-500 hover:underline">Use an Authenticator App</a>
        </div>
        <div class="mt-6">
            <img src="https://picsum.photos/200/100" alt="Random image" class="rounded-lg shadow-md dark:shadow-lg" />
        </div>
    </div>
</div>

Two-Factor Authentication Component

A simple and responsive two-factor authentication component designed in a retro style with earth tones, suitable for social media interfaces.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

Two-Factor Authentication Component

A responsive Two-Factor Authentication component designed in dark mode using grayscale colors, suitable for blog or content consumption.

Open Preview

                <div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

Two-Factor Authentication Component

A responsive two-factor authentication component using Tailwind CSS with dark theme support. Features a minimalist/flat design, monochromatic color scheme, complex layout with multiple interactive elements suitable for e-commerce.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
    <div class="flex justify-center space-x-2 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
      Verify Code
    </button>
    <div class="mt-6 text-center">
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
      <span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
    </div>
  </div>
</div>

Two-Factor Authentication Component

A Two-Factor Authentication component designed with engaging microinteractions and a complementary color scheme. It is responsive and supports dark mode, suitable for showcasing work or products in a portfolio.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
        <div class="p-6">
            <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.</p>
            <div class="flex justify-between items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
            </div>
            <form>
                <input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
                <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
            </form>
            <div class="mt-4 flex justify-between">
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
            </div>
        </div>
    </div>
</div>

Two-Factor Authentication Component

A responsive Two-Factor Authentication Component with 3D design elements and triadic color scheme, suitable for a blog or content site. Includes dark mode support.

Open Preview

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

Two-Factor Authentication Component

Retro/Vintage Two-Factor Authentication Component with responsive design and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
      <div class="space-y-6">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
          <div class="mt-1">
            <input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
            Verify Code
          </button>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
          Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
        </p>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication Component

A simple and clean two-factor authentication component design using Tailwind CSS with responsive effects and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

Categories