CAPTCHA 구성 요소

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