Composants CAPTCHA Composant CAPTCHA - Conception matérielle de bonbons

Composant CAPTCHA - Conception matérielle de bonbons

Un composant CAPTCHA simple et réactif avec une esthétique Material Design sur le thème des bonbons, adapté aux sites Web d’événements et de conférences. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="p-4 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:shadow-2xl dark:shadow-md">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400">I'm not a robot</h2>
        <div class="w-12 h-12 flex items-center justify-center bg-gradient-to-br from-pink-400 to-purple-500 rounded-full shadow-lg">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row items-center gap-4">
        <div class="flex-shrink-0">
          <button type="button" class="w-24 h-24 sm:w-28 sm:h-28 bg-white dark:bg-gray-700 border-4 border-pink-300 dark:border-pink-500 rounded-lg shadow-inner flex items-center justify-center focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-600 transition duration-200 ease-in-out transform active:scale-95">
            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-mint-green-300 dark:bg-mint-green-500 rounded-md shadow-md"></div>
          </button>
        </div>
        <div class="flex-grow text-gray-700 dark:text-gray-300">
          <p class="text-sm text-center sm:text-left">Please click the checkbox to confirm you are not a robot.</p>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center sm:text-left">This helps protect our event from spam and abuse.</p>
        </div>
      </div>

      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
        <a href="#" class="text-xs text-mint-green-600 dark:text-mint-green-400 hover:underline transition duration-200">
          Privacy & Terms
        </a>
      </div>
    </div>
  </div>
  <style>
    /* Custom 'Mint Green' color for demonstration, you can extend your tailwind.config.js */
    .bg-mint-green-300 {
      background-color: #A7F0C7; /* A lighter, cheerful mint */
    }
    .dark\:bg-mint-green-500 {
      background-color: #6EE7B7; /* A slightly darker mint for dark mode */
    }
    .text-mint-green-600 {
      color: #059669; /* A vivid mint green */
    }
    .dark\:text-mint-green-400 {
      color: #34D399; /* A brighter mint green for dark mode */
    }
  </style>
</div>

Composants associés

Composant CAPTCHA

Un composant CAPTCHA inspiré du Material Design avec une palette de couleurs monochromatiques, adapté aux blogs ou aux sites de contenu. Comprend une case à cocher, un texte de type reCAPTCHA « Je ne suis pas un robot » et une zone de vérification d’image de remplacement. Entièrement réactif et prend en charge le mode sombre.

Ouvrir

Retro_Captcha_Component

Un composant CAPTCHA de style rétro/vintage aux tons océan/bleu, conçu pour les sites de conseil/services. Dispose d’une interface complexe avec une image déformée, un défi audio et un champ de saisie.

Ouvrir

Composant CAPTCHA

Un composant CAPTCHA de style Material Design pour améliorer la sécurité d’un site Web de portfolio, avec un thème sombre et un design réactif avec Tailwind CSS.

Ouvrir