验证码组件

一个具有深色模式和响应式设计的 CAPTCHA 组件。

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-white mb-4">CAPTCHA Challenge</h2>
    <div class="flex items-center justify-center mb-4">
      <img src="https://picsum.photos/150/60" alt="CAPTCHA Image" class="mr-4 rounded-md">
      <input type="text" class="border border-gray-700 bg-gray-900 text-white rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Verify</button>
  </div>
</div>

相关组件

验证码组件

一个响应式的CAPTCHA组件,受到Material Design的启发,支持暗模式,使用Tailwind CSS。

打开

Monospace_Developer_CAPTCHA_Component

一个复杂的、受代码启发的 CAPTCHA 组件,具有等宽字体、终端美学和互补配色方案,专为作品集展示作品而设计。完全响应,支持深色模式。

打开

Luxury_Premium_CAPTCHA_Weather_Component

一个复杂的、以奢侈品为主题的 CAPTCHA 组件,适用于天气/气候应用,具有冷色调、精致的排版和响应式设计,支持深色模式。它包括视觉挑战、“当前天气”显示和“气候数据”部分等元素。

打开