Search Components

CAPTCHA

Challenge-response test to determine human users

Glassmorphism Captcha Component

A simple, responsive glassmorphism-style CAPTCHA component with grayscale color scheme and dark mode support, suitable for blog or content sites.

Open Preview

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

  <div class="w-full max-w-sm mx-auto bg-white/20 dark:bg-gray-800/20 backdrop-blur-lg rounded-2xl shadow-xl border border-white/30 dark:border-gray-700/30 p-6 sm:p-8 transition-all duration-300 ease-in-out">

    <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center select-none">
      Verify you are human
    </h2>

    <p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center select-none">
      To proceed, please check the box below.
    </p>

    <div class="flex items-center justify-center mb-6">
      <label for="captcha-checkbox" class="relative flex items-center cursor-pointer">
        <input type="checkbox" id="captcha-checkbox" class="sr-only peer">
        <div class="w-6 h-6 border-2 border-gray-500 dark:border-gray-400 rounded-md bg-gray-200 dark:bg-gray-700 peer-checked:bg-white dark:peer-checked:bg-gray-200 peer-checked:border-white dark:peer-checked:border-gray-200 transition-all duration-200 ease-in-out flex items-center justify-center">
          <svg class="w-4 h-4 text-gray-800 opacity-0 peer-checked:opacity-100 transition-opacity duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
          </svg>
        </div>
        <span class="ml-3 text-base text-gray-700 dark:text-gray-200 select-none">I'm not a robot</span>
      </label>
    </div>

    <div class="flex justify-center">
      <button type="submit" class="bg-gray-400 dark:bg-gray-600 text-white dark:text-gray-200 px-6 py-2 rounded-lg font-semibold hover:bg-gray-500 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 focus:ring-opacity-75 transition-colors duration-200 ease-in-out select-none">
        Submit
      </button>
    </div>

  </div>

</div>

Retro_Vintage_Captcha_Component

A retro/vintage themed CAPTCHA component for business/corporate websites, featuring an analogous color scheme, responsive design, and dark mode support. It evokes 80s/90s aesthetics.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-95 md:scale-100
              bg-gradient-to-br from-purple-300 via-pink-300 to-red-300
              dark:from-purple-800 dark:via-pink-800 dark:to-red-800 dark:border dark:border-gray-700">
    <div class="p-6 space-y-6">
      <header class="flex items-center justify-between border-b-2 border-dashed border-gray-700/50 dark:border-gray-200/50 pb-4 mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wider uppercase drop-shadow-md">
          SYSTEM CHECK
        </h2>
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 111.955 0 0112 2.928c-2.483.9-4.502 2.766-5.836 5.011zm0 0c-1.334 2.245-2.001 4.707-2.001 7.218 0 3.738 2.059 6.829 5.838 6.829 3.78 0 5.838-3.091 5.838-6.829 0-2.511-.667-4.973-2.001-7.218z" />
        </svg>
      </header>

      <div class="mt-4 mb-6 space-y-4">
        <p class="text-sm text-gray-700 dark:text-gray-200">
          Help us confirm you are not a robot by solving the puzzle below. We appreciate your cooperation.
        </p>

        <div class="bg-checkerboard-light dark:bg-checkerboard-dark p-4 rounded-md border-2 border-purple-600 dark:border-pink-600 shadow-inner flex flex-col items-center justify-center space-y-4">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 drop-shadow-sm">Click all squares with:</p>
          <div class="flex items-center space-x-2 text-2xl font-extrabold text-red-700 dark:text-yellow-400 uppercase tracking-widest">
            <img src="https://picsum.photos/40/40?random=11" alt="Target Object" class="w-8 h-8 rounded-full border-2 border-red-500 dark:border-yellow-400 object-cover">
            <span>VINTAGE CARS</span>
          </div>
          <div class="grid grid-cols-3 gap-2 w-full max-w-xs aspect-square p-2 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700">
            <!-- Replace with actual image selections or logic -->
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=1" alt="Random image 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=2" alt="Random image 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=3" alt="Random image 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=4" alt="Random image 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=5" alt="Random image 5" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=6" alt="Random image 6" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=7" alt="Random image 7" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=8" alt="Random image 8" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=9" alt="Random image 9" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center pt-4 border-t-2 border-dashed border-gray-700/50 dark:border-gray-200/50">
        <button type="button" class="transition-all duration-200
                       rounded-md py-2 px-4 text-xs font-bold uppercase tracking-wider
                       bg-blue-600 hover:bg-blue-700 text-white shadow-md
                       dark:bg-blue-700 dark:hover:bg-blue-800 dark:shadow-lg
                       focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-900">
          <svg class="inline-block mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.896 4.21 2.344 5.656M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.21-.896-4.21-2.344-5.656" />
          </svg>
          Reload
        </button>
        <button type="submit" class="transition-all duration-200
                        rounded-md py-2 px-6 text-base font-bold uppercase tracking-wider
                        bg-green-600 hover:bg-green-700 text-white shadow-md
                        dark:bg-lime-600 dark:hover:bg-lime-700 dark:shadow-lg
                        focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
                        dark:focus:ring-lime-500 dark:focus:ring-offset-gray-900">
          Verify
        </button>
      </div>

      <footer class="text-center text-xs text-gray-700 dark:text-gray-300 opacity-70 mt-6">
        <p>&copy; 1996 - <span id="current-year"></span> CyberCorp Security Inc.</p>
      </footer>
    </div>
  </div>
</div>

<style>
  /* Base grid item styling */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    filter: grayscale(20%); /* Faded retro look */
  }

  .captcha-grid-item:hover {
    border-color: #6d28d9; /* Deep Purple */
    box-shadow: 0 0 0 2px #6d28d9; /* Focus ring effect */
  }

  .dark .captcha-grid-item:hover {
    border-color: #db2777; /* Deep Pink */
    box-shadow: 0 0 0 2px #db2777;
  }

  .captcha-grid-item.selected {
    border-color: #10B981; /* Emerald Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #10B981;
  }

  .dark .captcha-grid-item.selected {
    border-color: #84cc16; /* Lime Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #84cc16;
  }

  /* Overlay to indicate selection */
  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(162, 28, 175, 0.4); /* Purple overlay */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dark .captcha-overlay {
    background-color: rgba(219, 39, 119, 0.4); /* Pink overlay */
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(16, 185, 129, 0.6); /* Emerald Green overlay */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(132, 204, 22, 0.6); /* Lime Green overlay */
  }

  .captcha-overlay::after {
    content: '\2713'; /* Checkmark symbol */
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
  }

  /* Checkerboard Background Pattern */
  .bg-checkerboard-light {
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
                      linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  .dark .bg-checkerboard-dark {
    background-image: linear-gradient(45deg, #333 25%, transparent 25%),
                      linear-gradient(-45deg, #333 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #333 75%),
                      linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
</style>

<script>
  // This script is purely for demonstration purposes to update the year and toggle 'selected' class.
  // In a real application, this logic would be handled by a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const currentYearSpan = document.getElementById('current-year');
    if (currentYearSpan) {
      currentYearSpan.textContent = new Date().getFullYear();
    }

    document.querySelectorAll('.captcha-grid-item').forEach(item => {
      item.addEventListener('click', () => {
        item.classList.toggle('selected');
      });
    });

    // Optional: Simulate dark mode toggle for demonstration outside Tailwind playground
    // In a real app, this would be handled by a global state/preference system
    const toggleDarkMode = () => {
      document.documentElement.classList.toggle('dark');
    };
    // Example: Add a button to toggle dark mode for testing (not part of the component itself)
    // const darkToggleBtn = document.createElement('button');
    // darkToggleBtn.textContent = 'Toggle Dark Mode';
    // darkToggleBtn.onclick = toggleDarkMode;
    // document.body.prepend(darkToggleBtn);
  });
</script>

CAPTCHA Component

A Material Design-inspired CAPTCHA component with a monochromatic color scheme, suitable for blogs or content sites. Features a checkbox, a reCAPTCHA-like 'I'm not a robot' text, and a placeholder image verification area. Fully responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
    <div class="p-6 space-y-6">
      <!-- CAPTCHA Header -->
      <div class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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.01 12.01 0 002.92 12c0 3.072 1.407 5.8 3.636 7.619A11.952 11.952 0 0112 21.055c3.072 0 5.8-1.407 7.619-3.636A11.952 11.952 0 0121.08 12c0-3.072-1.407-5.8-3.636-7.619z" />
        </svg>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Security Check</h3>
      </div>

      <!-- Checkbox Area -->
      <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-inner">
        <input type="checkbox" id="not-robot" class="h-6 w-6 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-blue-600 dark:checked:border-transparent cursor-pointer">
        <label for="not-robot" class="text-lg text-gray-700 dark:text-gray-200 select-none cursor-pointer">I'm not a robot</label>
      </div>

      <!-- Verification Content Placeholder -->
      <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 space-y-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          Please click the images containing a
          <strong class="font-medium text-gray-700 dark:text-gray-200">traffic light</strong>.
          Click verify once there are none left.
        </p>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/101/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
              <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/102/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/103/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/104/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/105/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/106/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
        </div>
        <div class="flex justify-end pt-2">
          <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            Verify
          </button>
        </div>
      </div>
    </div>

    <!-- CAPTCHA Footer - reCAPTCHA branding placeholder -->
    <div class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
      <div class="flex items-center space-x-1">
        <svg class="h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-3.5-3.5L7 12l2-2 4 4 6-6 1.5 1.5L10 17z"/>
        </svg>
        <span>reCAPTCHA</span>
      </div>
      <div class="text-right">
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy</a>
        <span> - </span>
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms</a>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component

A simple CAPTCHA component with a dark mode grayscale design, optimized for readability on blog and content sites.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full border border-gray-700">
        <h2 class="text-2xl font-bold text-white mb-6 text-center">Verify you are not a robot</h2>
        <div class="flex items-center justify-between bg-gray-700 p-4 rounded-md mb-6">
            <img src="https://picsum.photos/120/50?grayscale&blur=1" alt="CAPTCHA image" class="rounded">
            <button class="bg-gray-600 text-white p-2 rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
                <svg class="w-5 h-5" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582m-15.356-2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582"></path></svg>
            </button>
        </div>
        <div class="mb-6">
            <input type="text" placeholder="Enter the text from the image" class="form-input w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent">
        </div>
        <button class="w-full bg-gray-600 text-white p-3 rounded-md font-semibold hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Submit
        </button>
    </div>
</div>

CAPTCHA Component

A Glassmorphism-styled CAPTCHA component with a triadic color scheme, suitable for social media platforms. Features frosted glass-like translucent elements with blur effects, with a medium complexity and some interactive features. The design is responsive and includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
    <h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>

    <div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
      <img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
      <div class="flex-grow">
        <p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
        <div class="grid grid-cols-3 gap-2">
          <img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
        </div>
      </div>
    </div>

    <div class="flex items-center text-white dark:text-gray-200 mb-6">
      <input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
      <label for="robot-check" class="text-sm select-none">I'm not a robot</label>
    </div>

    <button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Verify
    </button>

    <p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
  </div>
</div>

Retro Vintage CAPTCHA Component

A simple CAPTCHA component designed with a nostalgic retro aesthetic, vibrant color scheme, suitable for business and corporate websites, with dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 border border-violet-500 rounded-lg p-6 max-w-sm mx-auto shadow-lg">
    <h2 class="text-center text-2xl font-bold text-violet-600 dark:text-violet-300 mb-4">Prove You Are Human</h2>
    <p class="text-center text-gray-700 dark:text-gray-200 mb-4">Please complete the CAPTCHA below.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="border border-pink-400 rounded-lg">
    </div>
    <div class="flex items-center justify-between">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
        <button class="ml-2 bg-violet-600 dark:bg-violet-400 hover:bg-violet-500 dark:hover:bg-violet-300 text-white font-bold py-2 px-4 rounded-lg">Verify</button>
    </div>
    <div class="mt-4 text-center">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Not readable? <a href="#" class="text-violet-600 hover:underline">Try another</a></p>
    </div>
</div>

Minimalist CAPTCHA

A responsive CAPTCHA component with dark mode support, featuring a minimalist design with pastel colors. Includes a simple checkbox and a placeholder for text.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

CAPTCHA Component - Brutalism Vibrant Moderate

A Brutalist CAPTCHA component for a dashboard with vibrant colors and moderate complexity.

Open Preview

                <div class="dark:bg-zinc-900 p-6 rounded-lg shadow-xl dark:shadow-none border-4 border-black dark:border-white">
  <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">Verify You Are Not a Robot</h2>
  <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <div id="captcha-image" class="w-full md:w-1/2 h-32 bg-gray-300 dark:bg-zinc-700 flex items-center justify-center text-black dark:text-white text-4xl font-mono border-2 border-black dark:border-white">
      <!-- CAPTCHA image or text will be generated here -->
      <span class="select-none">Aj9pQ</span>
    </div>
    <div class="w-full md:w-1/2">
      <label for="captcha-input" class="block text-sm font-medium text-black dark:text-white mb-2">Enter the text in the image:</label>
      <input type="text" id="captcha-input" class="w-full px-4 py-2 border-2 border-black dark:border-white bg-white dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
    </div>
  </div>
  <button class="mt-6 w-full bg-yellow-500 text-black dark:bg-yellow-600 dark:text-zinc-900 font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-500 transition duration-300">
    Submit
  </button>
  <button class="mt-4 w-full text-black dark:text-white font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-gray-200 dark:hover:bg-zinc-700 transition duration-300">
    Refresh CAPTCHA
  </button>
</div>

CAPTCHA Component

A Material Design styled CAPTCHA component to enhance the security of a portfolio website, featuring a dark theme and responsive design with Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p>
    <div class="flex items-center justify-between mb-4"> 
      <img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" />
      <input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400">
    </div>
    <div class="flex flex-col items-center mb-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p>
      <div class="grid grid-cols-2 gap-2 mt-2">
        <img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
      </div>
    </div>
    <button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button>
    <div class="flex items-center justify-between mt-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700">
    </div>
  </div>
</div>

Retro Vintage CAPTCHA For Social Media

A retro-vintage CAPTCHA component for social media, with vibrant colors, moderate complexity, responsiveness, and dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
    
    <!-- CAPTCHA Image/Challenge Area -->
    <div class="relative mb-6">
      <img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
      <div class="absolute inset-0 bg-black opacity-25"></div>
      <div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
        kS7p#aG9
      </div>
    </div>
    
    <!-- Input Field -->
    <div class="mb-6">
      <label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
        Enter the characters you see:
      </label>
      <input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
    </div>
    
    <!-- Reload and Audio Buttons -->
    <div class="flex justify-between mb-6">
      <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Reload
      </button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Audio
      </button>
    </div>
    
    <!-- Submit Button -->
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
      Verify
    </button>
  </div>
</div>

Search Components

Categories

CAPTCHA