CAPTCHA 구성 요소
머티리얼 디자인 원칙과 Tailwind CSS를 사용하여 스타일이 지정된 CAPTCHA 구성 요소로, 전자 상거래 웹사이트에 적합하며 어두운 테마 지원 및 반응형 디자인이 있습니다.
HTML 코드
<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 구성 요소로, 바다/블루 톤을 특징으로 하는 스위스/국제 타이포그래피 디자인 스타일입니다. 이벤트 및 컨퍼런스 웹사이트용으로 설계되었으며 반응형이며 다크 모드 지원이 포함되어 있습니다.
CAPTCHA 구성 요소
음식/레스토랑 웹사이트를 위한 간단하고 깔끔한 모노스페이스 테마의 CAPTCHA 구성 요소로, 그레이스케일 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.