구성 요소 캡차 소셜 미디어용 레트로 빈티지 CAPTCHA

소셜 미디어용 레트로 빈티지 CAPTCHA

소셜 미디어용 레트로 빈티지 CAPTCHA 구성 요소로, Tailwind CSS를 사용하여 생생한 색상, 적당한 복잡성, 응답성 및 다크 모드를 지원합니다.

미리 보기

HTML 코드

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

관련 구성 요소

CAPTCHA 구성 요소

반응형 CAPTCHA 구성 요소에는 마이크로 인터랙션, 어두운 테마 지원 및 임의의 자리 표시자 이미지가 있습니다.

열다

다크 모드 CAPTCHA 구성 요소

다크 모드 UI용으로 설계된 CAPTCHA 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다

레트로 빈티지 CAPTCHA 구성 요소

향수를 불러일으키는 복고풍 미학, 생생한 색 구성표로 설계된 간단한 CAPTCHA 구성 요소로, 비즈니스 및 기업 웹사이트에 적합하며 다크 모드를 지원합니다.

열다