验证码组件

一个 Material Design 样式的 CAPTCHA 组件,用于增强作品集网站的安全性,具有深色主题和带有 Tailwind CSS 的响应式设计。

预览

HTML 代码

<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>

相关组件

验证码组件

一个针对社交媒体界面设计的拟物化验证码组件,具有三元色彩方案,包含多个互动元素并支持黑暗主题。

打开

Retro_Candy_CAPTCHA_Component

一个复杂的复古/复古风格 CAPTCHA 组件,具有糖果/甜蜜的配色方案,专为预订和预订系统而设计。具有多个交互式元素、完全响应式布局和深色模式支持。

打开

复古验证码组件

一个以复古/复古美学和柔和色彩样式设计的CAPTCHA组件,专为支持暗模式的数据可视化仪表板设计.

打开