검색 구성 요소

카테고리

캡차

인간 사용자를 결정하기 위한 챌린지-응답 테스트

CAPTCHA 구성 요소

레트로/빈티지 스타일의 반응형 CAPTCHA 구성 요소이며 파스텔 색 구성표와 다크 모드를 지원합니다.

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <div class="text-center mb-6">
      <h2 class="text-2xl font-serif text-gray-700 dark:text-gray-300 mb-4">Security Check</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Please verify you are not a robot.</p>
    </div>

    <div class="mb-6 border-2 border-dashed border-gray-400 dark:border-gray-600 p-4 rounded">
      <p class="text-center text-xl font-mono text-gray-800 dark:text-gray-200 tracking-widest">uGh7fX</p>
    </div>

    <div class="mb-6">
      <label for="captchaInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enter the text above:</label>
      <input type="text" id="captchaInput" name="captchaInput" class="form-input mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
    </div>

    <button type="button" class="w-full bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-500 hover:to-purple-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      Verify
    </button>
  </div>
</div>

Glassmorphism CAPTCHA 구성 요소

glassmorphism 디자인 스타일을 가진 간단한 CAPTCHA 구성 요소입니다. 전자 상거래 웹 사이트에 이상적이며 젖빛 유리와 같은 반투명 효과, 다크 모드 지원 및 그레이스케일 색 구성표를 특징으로 합니다.

열다 미리 보기

                <div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
        </div>
        <div class="flex justify-center items-center">
            <input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
            <button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
        </div>
        <div class="flex justify-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
        </div>
    </div>
</div>

Brutalist CAPTCHA 구성 요소

회색조 색 구성표로 설계된 원시적이고 대담한 CAPTCHA 구성 요소로, 사용자 확인을 위한 대화형 기능을 포함하여 대시보드 인터페이스에 적합합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Please Verify You're Human</h2>
    <img src="https://picsum.photos/400/200" alt="Random Image" class="mb-4 rounded-lg shadow-md" />
    <p class="text-gray-700 dark:text-gray-300 mb-4">Select all images with traffic lights:</p>
    <div class="grid grid-cols-2 gap-4 mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=3" alt="Image 3" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=4" alt="Image 4" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
    </div>
    <button class="bg-gray-900 hover:bg-gray-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-4 rounded transition duration-200">Verify</button>
    <div class="mt-4">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Need help? <a href="#" class="text-blue-500 dark:text-blue-300 underline">Contact Support</a></p>
    </div>
</div>

CAPTCHA 구성 요소

머티리얼 디자인 원칙과 Tailwind CSS를 사용하여 스타일이 지정된 CAPTCHA 구성 요소로, 전자 상거래 웹사이트에 적합하며 어두운 테마 지원 및 반응형 디자인이 있습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
    <div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
        </div>
        <div class="my-4">
            <label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
            <input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
        </div>
        <button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
    </div>
</div>

CAPTCHA 구성 요소

소셜 미디어용으로 설계된 스큐어모픽 CAPTCHA 구성 요소는 트라이어드 색 구성표와 인터페이스하며, 여러 대화형 요소와 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
    <h2 class="text-2xl font-bold text-white mb-4">Prove You're Not a Robot</h2>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md flex items-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="rounded-lg shadow-lg">
        <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200 mb-2">Select all images containing:</p>
            <div class="grid grid-cols-2 gap-2">
                <img src="https://picsum.photos/100?random=1" alt="Image 1" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=2" alt="Image 2" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=3" alt="Image 3" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=4" alt="Image 4" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-full shadow-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        Verify
    </button>
    <p class="mt-2 text-gray-400 dark:text-gray-500 text-sm">If you are having trouble, refresh the challenge.</p>
</div>

CAPTCHA 구성 요소

머티리얼 디자인 원칙과 비즈니스/기업 웹사이트를 위한 파스텔 색 구성표로 설계된 간단한 CAPTCHA 구성 요소입니다.

열다 미리 보기

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
    <div class="mt-4 flex flex-col items-center">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
        <div class="mt-3 flex items-center">
            <label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
            <input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
        </div>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
    </div>
</div>

CAPTCHA 구성 요소

포트폴리오 전시를 위한 미니멀리스트/플랫 디자인 CAPTCHA 구성 요소, 다크 모드 지원으로 반응합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded-lg border border-gray-300 dark:border-gray-600" />
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please complete the CAPTCHA to prove you are human.</p>
    <div class="flex flex-col space-y-4 w-full">
        <input type="text" placeholder="Enter the characters you see" class="border border-gray-300 dark:border-gray-600 rounded p-2 focus:outline-none focus:ring focus:ring-gray-500 dark:focus:ring-gray-600" />
        <button class="bg-gray-800 text-white rounded p-2 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Submit</button>
    </div>
    <div class="flex items-center justify-between mt-4 text-sm text-gray-600 dark:text-gray-400">
        <span>Need a new CAPTCHA? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Refresh</a></span>
        <span>Help? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact Us</a></span>
    </div>
</div>

레트로/빈티지 CAPTCHA 구성 요소

소셜 미디어 인터페이스를 위해 설계된 레트로 스타일의 CAPTCHA 구성 요소로, 생생한 색상과 반응형 디자인 및 어두운 테마 지원이 있는 복잡한 레이아웃을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-900 dark:to-indigo-800 rounded-lg shadow-lg max-w-md w-full">
    <h2 class="text-white text-2xl font-bold mb-4">Verify You're Human</h2>
    <img src="https://picsum.photos/400/200?random=1" alt="Nostalgic Background" class="rounded-lg mb-4" />
    <div class="flex flex-col items-center text-center mb-4">
        <p class="text-white mb-2">To continue, please solve the puzzle below:</p>
        <div class="flex flex-row space-x-2 bg-white p-2 rounded-lg shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-violet-500 dark:border-violet-300" />
            <p class="text-gray-800 font-semibold">Identify the vintage item:</p>
            <img src="https://picsum.photos/100/100?random=2" alt="Vintage Item" class="w-10 h-10 rounded-lg border-2 border-pink-500 dark:border-pink-300" />
        </div>
    </div>
    <input type="text" placeholder="Your Answer" class="w-full p-2 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 rounded-lg mb-4" />
    <button class="bg-fuchsia-500 hover:bg-fuchsia-600 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-800 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out">Submit</button>
</div>

CAPTCHA 구성 요소

생생한 색상과 반응형 디자인의 대시보드를 위해 설계된 3D 스타일의 CAPTCHA 구성 요소로, 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
    <div class="w-full max-w-xs">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">  
            <img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
            <p class="ml-4">Check all images with a car</p>
        </div>
        <div class="grid grid-cols-3 gap-2 my-4">  
            <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
        </div>
        <button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
    </div>
</div>

레트로 캡차

어스 톤, 적당한 복잡성 및 비즈니스 웹사이트를 위한 레트로/빈티지 스타일을 갖춘 반응형 CAPTCHA 구성 요소이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Verification</h2>
    
    <div class="mb-4">
      <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Enter the characters you see below:</label>
      <div class="flex items-center space-x-4">
        <div class="captcha-display bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white text-xl font-mono px-4 py-2 rounded tracking-wider">
          A3fG9h
        </div>
        <button class="px-3 py-2 bg-gray-200 dark:bg-gray-500 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
          &#x21bb;
        </button>
      </div>
    </div>
    
    <input type="text" id="captcha-input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white" placeholder="Enter CAPTCHA">
    
    <button class="mt-6 w-full bg-amber-600 dark:bg-amber-700 text-white py-2 rounded hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
      Verify
    </button>
  </div>
</div>