CAPTCHA

Componente CAPTCHA

Un componente CAPTCHA in stile Glassmorphism con una combinazione di colori triadica, adatto per piattaforme di social media. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, con una complessità media e alcune funzioni interattive. Il design è reattivo e include il supporto per la modalità oscura.

Apri anteprima

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

Componente CAPTCHA vintage retrò

Un semplice componente CAPTCHA progettato con un'estetica retrò nostalgica, combinazione di colori vivaci, adatto per siti Web aziendali e aziendali, con supporto per la modalità oscura.

Apri anteprima

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

Un componente CAPTCHA reattivo con supporto per la modalità oscura, caratterizzato da un design minimalista con colori pastello. Include una semplice casella di controllo e un segnaposto per il testo.

Apri anteprima

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

Componente CAPTCHA - Brutalismo Vibrante Moderato

Un componente CAPTCHA brutalista per un cruscotto con colori vivaci e complessità moderata.

Apri anteprima

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

Componente CAPTCHA

Un componente CAPTCHA in stile Material Design per migliorare la sicurezza di un sito web portfolio, caratterizzato da un tema scuro e un design reattivo con Tailwind CSS.

Apri anteprima

                <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 vintage retrò per i social media

Un componente CAPTCHA retrò-vintage per i social media, con colori vivaci, complessità moderata, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

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

Componente CAPTCHA

Componente CAPTCHA reattivo in stile Retrò/Vintage con combinazione di colori pastello e supporto per la modalità scura.

Apri anteprima

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

Componente CAPTCHA Glassmorphism

Un semplice componente CAPTCHA con uno stile di progettazione glassmorphism. Ideale per i siti Web di e-commerce, presenta un effetto traslucido simile al vetro smerigliato, supporto per la modalità scura e una combinazione di colori in scala di grigi.

Apri anteprima

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

Componente CAPTCHA brutalista

Un componente CAPTCHA grezzo e audace progettato con una combinazione di colori in scala di grigi, adatto per un'interfaccia dashboard, comprese funzionalità interattive per la verifica dell'utente.

Apri anteprima

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

Componente CAPTCHA

Un componente CAPTCHA con uno stile che utilizza i principi di Material Design e Tailwind CSS, adatto per siti di e-commerce, con supporto per temi scuri e design reattivo.

Apri anteprima

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

Categorie