CAPTCHA 구성 요소 - 유기농/자연에서 영감을 받은 (가을색)
뉴스/저널리즘 웹사이트에 적합한 가을 색상을 사용하여 자연에서 영감을 받은 유기적 스타일로 설계된 복잡하고 반응이 빠른 CAPTCHA 구성 요소입니다. 완전한 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-sm p-6 rounded-2xl shadow-xl bg-white/80 backdrop-blur-sm transform transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80 dark:border dark:border-gray-700 md:max-w-md lg:max-w-lg overflow-hidden relative">
<!-- Organic Shape Overlay -->
<div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-gradient-to-br from-orange-200 to-amber-300 opacity-60 dark:from-gray-700 dark:to-gray-900 dark:opacity-40 filter blur-xl transform rotate-45"></div>
<div class="absolute -bottom-10 -right-10 w-40 h-40 rounded-full bg-gradient-to-br from-red-300 to-amber-400 opacity-60 dark:from-gray-800 dark:to-teal-900 dark:opacity-40 filter blur-xl transform -rotate-30"></div>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-amber-800 mb-6 text-center dark:text-amber-300 leading-tight tracking-wide">
<span class="block">Are you a Human?</span>
<span class="block text-xl font-medium text-orange-600 dark:text-orange-400">A quick check before proceeding</span>
</h2>
<!-- Captcha Challenge Area -->
<div class="bg-orange-50/70 dark:bg-gray-700/60 p-5 rounded-xl border border-orange-200 dark:border-gray-600 mb-6 shadow-inner relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/600/400?blur=5&grayscale=true')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
<div class="relative z-10">
<p class="text-lg text-amber-900 font-semibold mb-4 dark:text-amber-200 text-center">
Please select all images containing
<span class="font-extrabold text-red-700 dark:text-red-400">"Autumn Leaves"</span>
</p>
<div class="grid grid-cols-3 gap-3 md:gap-4">
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=1" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img1">
<label for="img1" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=2" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img2">
<label for="img2" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=3" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img3">
<label for="img3" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=4" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img4">
<label for="img4" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=5" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img5">
<label for="img5" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=6" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img6">
<label for="img6" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=7" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img7">
<label for="img7" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=8" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img8">
<label for="img8" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
<img src="https://picsum.photos/300/200?random=9" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
<input type="checkbox" class="hidden peer" id="img9">
<label for="img9" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center mb-6">
<button class="flex items-center text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
<svg class="w-5 h-5 mr-2" 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 12c0 2.88 1.14 5.518 3 7.493l1.884-1.884m5.348-2.604A7.962 7.962 0 0110 20c-5.14 0-8.862-5.714-8.862-5.714L10 10l-1.884 1.884"></path></svg>
Reload Challenge
</button>
<a href="#" class="text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
Get a new challenge
</a>
</div>
<button class="w-full flex items-center justify-center bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-600/40 dark:bg-amber-600 dark:hover:bg-amber-700 dark:shadow-amber-500/40 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
Verify
<svg class="w-5 h-5 ml-2 -mr-1" 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="M9 5l7 7-7 7"></path></svg>
</button>
<p class="text-center text-xs text-gray-500 mt-6 dark:text-gray-400">
Enhanced by <a href="#" class="underline hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">NatureShield™</a>
</p>
</div>
</div>
</div>
관련 구성 요소
미니멀리스트 캡차
다크 모드를 지원하는 반응형 CAPTCHA 구성 요소로, 파스텔 색상의 미니멀한 디자인이 특징입니다. 간단한 확인란과 텍스트에 대한 자리 표시자가 포함되어 있습니다.
Minimalist Captcha 구성 요소
대시보드용으로 설계된 단순하고 반응이 빠르며 미니멀한 CAPTCHA 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.
Brutalist CAPTCHA 구성 요소
브루탈리즘 스타일로 디자인된 CAPTCHA 구성 요소로, 높은 대비, 특이한 레이아웃, 어두운 테마를 지원하는 반응형 효과를 특징으로 합니다.