一个 Material Design 样式的 CAPTCHA 组件,用于增强作品集网站的安全性,具有深色主题和带有 Tailwind CSS 的响应式设计。
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4"> <div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2> <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p> <div class="flex items-center justify-between mb-4"> <img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" /> <input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"> </div> <div class="flex flex-col items-center mb-4"> <p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p> <div class="grid grid-cols-2 gap-2 mt-2"> <img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300"> <img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300"> <img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300"> <img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300"> </div> </div> <button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button> <div class="flex items-center justify-between mt-4"> <p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700"> </div> </div> </div>
一个针对社交媒体界面设计的拟物化验证码组件,具有三元色彩方案,包含多个互动元素并支持黑暗主题。
一个复杂的复古/复古风格 CAPTCHA 组件,具有糖果/甜蜜的配色方案,专为预订和预订系统而设计。具有多个交互式元素、完全响应式布局和深色模式支持。
一个以复古/复古美学和柔和色彩样式设计的CAPTCHA组件,专为支持暗模式的数据可视化仪表板设计.