CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 Brutalist CAPTCHA 구성 요소

Brutalist CAPTCHA 구성 요소

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

미리 보기

HTML 코드 

<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 구성 요소

머티리얼 디자인에서 영감을 받은 반응형 CAPTCHA 구성요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

Neumorphism CAPTCHA 구성 요소

전자 상거래 사이트를 위해 뉴모픽 스타일로 설계된 반응형의 복잡한 CAPTCHA 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

CAPTCHA 구성 요소 - Brutalism, Vibrant, Moderate

생생한 색상과 적당한 복잡성을 가진 대시보드를 위한 Brutalist CAPTCHA 구성 요소입니다.

열다