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

Brutalist CAPTCHA 구성 요소

브루탈리즘 스타일로 디자인된 CAPTCHA 구성 요소로, 높은 대비, 특이한 레이아웃, 어두운 테마를 지원하는 반응형 효과를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
        <h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
        <div class="flex items-center justify-between mb-4">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
            <span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
        </div>
        <div class="flex flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
        </div>
        <div class="flex space-x-4">
            <button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
            <button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
        </div>
    </div>
</div>

관련 구성 요소

CAPTCHA 구성 요소

다크 모드 그레이스케일 디자인의 간단한 CAPTCHA 구성 요소로, 블로그 및 콘텐츠 사이트의 가독성을 위해 최적화되었습니다.

열다

레트로 빈티지 CAPTCHA 구성 요소

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

열다

Neumorphism CAPTCHA 구성 요소

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

열다