验证码

CAPTCHA 组件

具有三元配色方案的 Glassmorphism 风格的 CAPTCHA 组件，适用于社交媒体平台。具有具有模糊效果的磨砂玻璃状半透明元素，具有中等复杂度和一些交互式功能。该设计是响应式的，并包括深色模式支持。

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
    <h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>

    <div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
      <img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
      <div class="flex-grow">
        <p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
        <div class="grid grid-cols-3 gap-2">
          <img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
        </div>
      </div>
    </div>

    <div class="flex items-center text-white dark:text-gray-200 mb-6">
      <input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
      <label for="robot-check" class="text-sm select-none">I'm not a robot</label>
    </div>

    <button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Verify
    </button>

    <p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
  </div>
</div>

Retro Vintage CAPTCHA 组件

一个简单的 CAPTCHA 组件，设计具有怀旧复古美学、充满活力的配色方案，适用于商业和企业网站，并支持深色模式。

打开预览

                <div class="bg-white dark:bg-gray-800 border border-violet-500 rounded-lg p-6 max-w-sm mx-auto shadow-lg">
    <h2 class="text-center text-2xl font-bold text-violet-600 dark:text-violet-300 mb-4">Prove You Are Human</h2>
    <p class="text-center text-gray-700 dark:text-gray-200 mb-4">Please complete the CAPTCHA below.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="border border-pink-400 rounded-lg">
    </div>
    <div class="flex items-center justify-between">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
        <button class="ml-2 bg-violet-600 dark:bg-violet-400 hover:bg-violet-500 dark:hover:bg-violet-300 text-white font-bold py-2 px-4 rounded-lg">Verify</button>
    </div>
    <div class="mt-4 text-center">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Not readable? <a href="#" class="text-violet-600 hover:underline">Try another</a></p>
    </div>
</div>

极简验证码

一个响应式 CAPTCHA 组件，支持深色模式，采用极简主义设计，色彩柔和。包括一个简单的复选框和一个文本占位符。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

验证码组件 - 粗犷主义鲜艳适中

一个粗野派 CAPTCHA 组件，适用于具有鲜艳色彩和中等复杂性的仪表板。

打开预览

                <div class="dark:bg-zinc-900 p-6 rounded-lg shadow-xl dark:shadow-none border-4 border-black dark:border-white">
  <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">Verify You Are Not a Robot</h2>
  <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <div id="captcha-image" class="w-full md:w-1/2 h-32 bg-gray-300 dark:bg-zinc-700 flex items-center justify-center text-black dark:text-white text-4xl font-mono border-2 border-black dark:border-white">
      <!-- CAPTCHA image or text will be generated here -->
      <span class="select-none">Aj9pQ</span>
    </div>
    <div class="w-full md:w-1/2">
      <label for="captcha-input" class="block text-sm font-medium text-black dark:text-white mb-2">Enter the text in the image:</label>
      <input type="text" id="captcha-input" class="w-full px-4 py-2 border-2 border-black dark:border-white bg-white dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
    </div>
  </div>
  <button class="mt-6 w-full bg-yellow-500 text-black dark:bg-yellow-600 dark:text-zinc-900 font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-500 transition duration-300">
    Submit
  </button>
  <button class="mt-4 w-full text-black dark:text-white font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-gray-200 dark:hover:bg-zinc-700 transition duration-300">
    Refresh CAPTCHA
  </button>
</div>

验证码组件

一个 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 组件，具有鲜艳的色彩、适中的复杂性、响应能力以及使用 Tailwind CSS 的深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
    
    <!-- CAPTCHA Image/Challenge Area -->
    <div class="relative mb-6">
      <img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
      <div class="absolute inset-0 bg-black opacity-25"></div>
      <div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
        kS7p#aG9
      </div>
    </div>
    
    <!-- Input Field -->
    <div class="mb-6">
      <label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
        Enter the characters you see:
      </label>
      <input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
    </div>
    
    <!-- Reload and Audio Buttons -->
    <div class="flex justify-between mb-6">
      <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Reload
      </button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Audio
      </button>
    </div>
    
    <!-- Submit Button -->
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
      Verify
    </button>
  </div>
</div>

验证码组件

Retro/Vintage 风格的响应式 CAPTCHA 组件，具有柔和的配色方案和深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <div class="text-center mb-6">
      <h2 class="text-2xl font-serif text-gray-700 dark:text-gray-300 mb-4">Security Check</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Please verify you are not a robot.</p>
    </div>

    <div class="mb-6 border-2 border-dashed border-gray-400 dark:border-gray-600 p-4 rounded">
      <p class="text-center text-xl font-mono text-gray-800 dark:text-gray-200 tracking-widest">uGh7fX</p>
    </div>

    <div class="mb-6">
      <label for="captchaInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enter the text above:</label>
      <input type="text" id="captchaInput" name="captchaInput" class="form-input mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
    </div>

    <button type="button" class="w-full bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-500 hover:to-purple-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      Verify
    </button>
  </div>
</div>

玻璃质感验证码组件

具有 glassmorphism 设计风格的简单 CAPTCHA 组件。非常适合电子商务网站，具有磨砂玻璃般的半透明效果、深色模式支持和灰度配色方案。

打开预览

                <div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
        </div>
        <div class="flex justify-center items-center">
            <input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
            <button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
        </div>
        <div class="flex justify-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
        </div>
    </div>
</div>

粗野主义验证码组件

一个具有灰度色彩方案的原始而大胆的验证码组件，适用于仪表板界面，包括用户验证的交互功能。

打开预览

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Please Verify You're Human</h2>
    <img src="https://picsum.photos/400/200" alt="Random Image" class="mb-4 rounded-lg shadow-md" />
    <p class="text-gray-700 dark:text-gray-300 mb-4">Select all images with traffic lights:</p>
    <div class="grid grid-cols-2 gap-4 mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=3" alt="Image 3" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
        <img src="https://picsum.photos/200/100?random=4" alt="Image 4" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
    </div>
    <button class="bg-gray-900 hover:bg-gray-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-4 rounded transition duration-200">Verify</button>
    <div class="mt-4">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Need help? <a href="#" class="text-blue-500 dark:text-blue-300 underline">Contact Support</a></p>
    </div>
</div>

验证码组件

一个使用材料设计原则和Tailwind CSS样式的CAPTCHA组件，适用于电子商务网站，支持深色主题和响应式设计。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
    <div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
        </div>
        <div class="my-4">
            <label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
            <input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
        </div>
        <button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
    </div>
</div>

类别