CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 레트로 빈티지 CAPTCHA 구성 요소

레트로 빈티지 CAPTCHA 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 border border-violet-500 rounded-lg p-6 max-w-sm mx-auto shadow-lg">
    <h2 class="text-center text-2xl font-bold text-violet-600 dark:text-violet-300 mb-4">Prove You Are Human</h2>
    <p class="text-center text-gray-700 dark:text-gray-200 mb-4">Please complete the CAPTCHA below.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="border border-pink-400 rounded-lg">
    </div>
    <div class="flex items-center justify-between">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
        <button class="ml-2 bg-violet-600 dark:bg-violet-400 hover:bg-violet-500 dark:hover:bg-violet-300 text-white font-bold py-2 px-4 rounded-lg">Verify</button>
    </div>
    <div class="mt-4 text-center">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Not readable? <a href="#" class="text-violet-600 hover:underline">Try another</a></p>
    </div>
</div>

관련 구성 요소

CAPTCHA 구성 요소

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

열다

CAPTCHA 구성 요소

스위스/국제 타이포그래피 디자인 스타일과 생생한 색 구성표를 갖춘 복잡하고 반응이 빠른 CAPTCHA 구성 요소로, CRM/비즈니스 도구에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Glassmorphism Captcha 구성 요소

회색조 색 구성표와 다크 모드를 지원하는 간단하고 반응이 빠른 glassmorphism 스타일의 CAPTCHA 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다.

열다