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>