Glassmorphism CAPTCHA 구성 요소
glassmorphism 디자인 스타일을 가진 간단한 CAPTCHA 구성 요소입니다. 전자 상거래 웹 사이트에 이상적이며 젖빛 유리와 같은 반투명 효과, 다크 모드 지원 및 그레이스케일 색 구성표를 특징으로 합니다.
HTML 코드
<div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex justify-center items-center">
<input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
<button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
</div>
<div class="flex justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
</div>
</div>
</div>관련 구성 요소
Cyberpunk_Weather_CAPTCHA_Component
날씨/기후 데이터를 위한 복잡한 사이버펑크 테마의 CAPTCHA 구성 요소로, 미래지향적인 네온 오션/블루 톤, 어두운 배경 및 여러 대화형 요소를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
ArtDecoCaptcha컴포넌트
아르데코 디자인 미학을 갖춘 간단하고 반응이 빠른 CAPTCHA 구성 요소로, 비즈니스/기업 웹사이트에 적합한 가을 색상을 사용하며 다크 모드를 지원합니다.