Ретро капча

Адаптивный компонент CAPTCHA с земляными тонами, умеренной сложностью и стилем Retro/Vintage для бизнес-сайтов с поддержкой темного режима с использованием Tailwind CSS. Нет JavaScript.

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Verification</h2>
    
    <div class="mb-4">
      <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Enter the characters you see below:</label>
      <div class="flex items-center space-x-4">
        <div class="captcha-display bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white text-xl font-mono px-4 py-2 rounded tracking-wider">
          A3fG9h
        </div>
        <button class="px-3 py-2 bg-gray-200 dark:bg-gray-500 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
          &#x21bb;
        </button>
      </div>
    </div>
    
    <input type="text" id="captcha-input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white" placeholder="Enter CAPTCHA">
    
    <button class="mt-6 w-full bg-amber-600 dark:bg-amber-700 text-white py-2 rounded hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
      Verify
    </button>
  </div>
</div>

Связанные компоненты

Retro_Vintage_Captcha_Component

Компонент CAPTCHA на ретро/винтажную тематику для бизнес/корпоративных сайтов, отличающийся аналогичной цветовой схемой, адаптивным дизайном и поддержкой темного режима. Он навевает эстетику 80-х/90-х годов.

Открытый

Retro_Candy_CAPTCHA_Component

Сложный компонент CAPTCHA в ретро/винтажном стиле с конфетно-сладкой цветовой схемой, предназначенный для систем бронирования и бронирования. Имеет несколько интерактивных элементов, полностью адаптивный макет и поддержку темного режима.

Открытый

РетроКапчаКомпонент

Простой компонент CAPTCHA в стиле ретро с цветовой палитрой зеленого леса, предназначенный для некоммерческих/благотворительных сайтов. Особенности, отзывчивость и поддержка темного режима.

Открытый