Retro CAPTCHA

Un composant CAPTCHA réactif avec des tons de terre, une complexité modérée et un style rétro/vintage pour les sites Web d’entreprise, avec prise en charge du mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Aperçu

HTML Code

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

Composants associés

Composant CAPTCHA

Un composant CAPTCHA complexe, inspiré du code, avec une palette de couleurs bonbon/doux, conçu pour les interfaces de médias sociaux. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et d’éléments interactifs.

Ouvrir

CAPTCHA minimaliste

Un composant CAPTCHA réactif avec prise en charge du mode sombre, avec un design minimaliste avec des couleurs pastel. Comprend une simple case à cocher et un espace réservé pour le texte.

Ouvrir

Composant CAPTCHA - Brutalisme Vibrant Modéré

Un composant CAPTCHA brutaliste pour un tableau de bord aux couleurs vives et à la complexité modérée.

Ouvrir