CAPTCHA 구성 요소
다크 모드 그레이스케일 디자인의 간단한 CAPTCHA 구성 요소로, 블로그 및 콘텐츠 사이트의 가독성을 위해 최적화되었습니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full border border-gray-700">
<h2 class="text-2xl font-bold text-white mb-6 text-center">Verify you are not a robot</h2>
<div class="flex items-center justify-between bg-gray-700 p-4 rounded-md mb-6">
<img src="https://picsum.photos/120/50?grayscale&blur=1" alt="CAPTCHA image" class="rounded">
<button class="bg-gray-600 text-white p-2 rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582m-15.356-2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582"></path></svg>
</button>
</div>
<div class="mb-6">
<input type="text" placeholder="Enter the text from the image" class="form-input w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent">
</div>
<button class="w-full bg-gray-600 text-white p-3 rounded-md font-semibold hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Submit
</button>
</div>
</div>
관련 구성 요소
Glassmorphism CAPTCHA 구성 요소
glassmorphism 디자인 스타일을 가진 간단한 CAPTCHA 구성 요소입니다. 전자 상거래 웹 사이트에 이상적이며 젖빛 유리와 같은 반투명 효과, 다크 모드 지원 및 그레이스케일 색 구성표를 특징으로 합니다.
Brutalist CAPTCHA 구성 요소
회색조 색 구성표로 설계된 원시적이고 대담한 CAPTCHA 구성 요소로, 사용자 확인을 위한 대화형 기능을 포함하여 대시보드 인터페이스에 적합합니다.