CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 Material Design CAPTCHA 구성 요소

Material Design CAPTCHA 구성 요소

어두운 테마 지원을 포함하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 CAPTCHA 구성요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
    <div class="mt-4 mb-6">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
    </div>
    <div class="flex items-center justify-between w-full">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
    </div>
    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
        <p>If you can't read the text, refresh to get a new image.</p>
    </div>
</div>

관련 구성 요소

Neumorphism CAPTCHA 구성 요소

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

열다

CAPTCHA 구성 요소

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

열다

Glassmorphism CAPTCHA 구성 요소

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

열다