Componentes de búsqueda

Categorías

CAPTCHA

Prueba de desafío-respuesta para determinar usuarios humanos

Componente CAPTCHA de la Bauhaus

Un componente CAPTCHA simple y funcional en estilo Bauhaus para sitios de documentación/wiki, con formas geométricas, alto contraste, capacidad de respuesta completa y soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg border-2 border-black dark:border-white relative overflow-hidden">
    
    <!-- Bauhaus geometric elements -->
    <div class="absolute top-0 left-0 w-16 h-16 bg-red-500 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-blue-500 transform translate-x-1/2 translate-y-1/2 -rotate-30"></div>
    <div class="absolute top-1/2 left-1/2 w-12 h-12 bg-yellow-500 z-0 transform -translate-x-1/2 -translate-y-1/2 rotate-12"></div>

    <div class="relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold mb-4 text-center dark:text-white uppercase tracking-wider">
        Are you Human?
      </h2>
      
      <p class="mb-6 text-sm text-center text-gray-700 dark:text-gray-300">
        Please click the square containing a &quot;Circle&quot;.
      </p>

      <div class="grid grid-cols-3 gap-2 mb-6">
        <!-- Example CAPTCHA grid items -->
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white transform rotate-45 group-hover:rotate-0 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 dark:ring-blue-400 group-hover:scale-110 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-2 md:w-10 md:h-2 bg-red-500 ring-2 ring-red-500 dark:ring-red-400 group-hover:w-full transition-all duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-6 h-6 md:w-8 md:h-8 border-4 border-yellow-500 dark:border-yellow-400 rounded-lg group-hover:rotate-180 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white clip-path-polygon-[50%_0%,_0%_100%,_100%_100%] group-hover:scale-105 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 border-4 border-red-500 dark:border-red-400 rounded-full group-hover:animate-spin-slow"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 relative">
            <div class="absolute inset-0 bg-yellow-500 dark:bg-yellow-400 group-hover:rotate-45 transition-transform duration-200"></div>
            <div class="absolute inset-0 bg-blue-500 dark:bg-blue-400 group-hover:-rotate-45 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-4 border-black dark:border-white relative">
            <div class="absolute w-2 h-2 rounded-full bg-black dark:bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-yellow-500 dark:bg-yellow-400 group-hover:scale-105 transition-transform duration-200"></div>
        </button>
      </div>

      <div class="flex justify-between items-center">
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Refresh
        </button>
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-blue-500 text-white dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

Componente CAPTCHA - Diseño de materiales de caramelo

Un componente CAPTCHA simple y receptivo con una estética de Material Design con temática de dulces, adecuado para sitios web de eventos y conferencias. Incluye soporte para modo oscuro.

Abrir Vista previa

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

Cyberpunk_Weather_CAPTCHA_Component

Un complejo componente CAPTCHA de temática cyberpunk para datos meteorológicos/climáticos, con tonos neón futuristas océano/azul, fondos oscuros y múltiples elementos interactivos. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-blue-300 flex items-center justify-center p-4 dark:bg-gray-950 transition-colors duration-500 font-mono">
  <div class="relative w-full max-w-xl p-8 rounded-xl shadow-2xl border border-blue-800/50 bg-gradient-to-br from-gray-900 to-gray-950 overflow-hidden
              dark:border-blue-700/50 dark:from-gray-900 dark:to-gray-950 transition-colors duration-500">

    <!-- Background Grid/Pattern -->
    <div class="absolute inset-0 z-0 opacity-10">
      <div class="absolute inset-0 bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]"
        style="background-image: linear-gradient(to right, #0A0A0A 1px, transparent 1px), linear-gradient(to bottom, #0A0A0A 1px, transparent 1px);"></div>
    </div>

    <!-- Neon Border Effect -->
    <div class="absolute inset-0 border-4 rounded-xl border-transparent pointer-events-none z-10 animate-pulse-border">
      <div class="absolute -inset-0.5 rounded-xl blur opacity-75 animate-neon-glow bg-gradient-to-r from-blue-600 via-cyan-500 to-blue-600"></div>
    </div>

    <div class="relative z-20 space-y-8">
      <h2 class="text-4xl font-bold text-center uppercase tracking-wider text-blue-400 drop-shadow-lg [text-shadow:0_0_8px_rgb(59_130_246_/_0.7)]">
        <span class="block">Security Protocol // Engage</span>
        <span class="block text-xl text-blue-500/70">"Climate Data Access"</span>
      </h2>

      <div class="bg-gray-800/60 p-6 rounded-lg border border-blue-700/40 shadow-inner space-y-6">
        <div class="flex items-center justify-between text-lg text-blue-300">
          <span class="flex items-center space-x-2">
            <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0v4m-5 3h2m-6 4h8a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z"></path></svg>
            Access Key Authorization
          </span>
          <svg class="w-6 h-6 text-blue-500 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37zm3.504 5.959a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </div>

        <p class="text-blue-200/90 text-sm md:text-base">To proceed, please identify the weather patterns that match the 'Glacial Anomaly Index' below:</p>

        <!-- CAPTCHA Grid -->
        <div class="grid grid-cols-3 gap-3 md:gap-4 lg:grid-cols-4">
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1041/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1043/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1049/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1050/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1052/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1053/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1055/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1063/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
        </div>

        <!-- Reload and Audio Buttons -->
        <div class="flex justify-around pt-2 text-blue-400">
          <button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356-2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-6.356-2H20v-5"></path></svg>
            <span>Reload Directive</span>
          </button>
          <button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19a2 2 0 002 2h2a2 2 0 002-2M9 19V6a3 3 0 003-3h.01M6 16V9a3 3 0 003-3m-6 0h.01M6 16a3 3 0 003 3"></path></svg>
            <span>Audio Scan</span>
          </button>
        </div>
      </div>

      <!-- Verify Button -->
      <button class="w-full flex items-center justify-center py-4 px-6 rounded-lg font-bold text-xl uppercase tracking-wider
                     bg-gradient-to-r from-blue-600 to-cyan-500 text-white shadow-lg 
                     hover:from-blue-700 hover:to-cyan-600 transition-all duration-300
                     focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75
                     scale-100 hover:scale-[1.01] active:scale-[0.99] transform">
        <svg class="w-7 h-7 mr-3 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Verify Bio-Signature
      </button>

      <p class="text-center text-blue-400/60 text-xs mt-6">
        Warning: Unauthorized bypass attempts will trigger Protocol 7. <br class="sm:hidden"/>System Log: <span class="text-yellow-400">//IP [REDACTED]</span>
      </p>
    </div>
  </div>
</div>

<style>
  /* Base for defining custom animations in Tailwind */
  @keyframes pulse-border {
    0%, 100% { border-color: rgba(59, 130, 246, 0.5); }
    50% { border-color: rgba(6, 182, 212, 0.7); }
  }
  @keyframes neon-glow {
    0%, 100% { filter: blur(4px) brightness(1.2); opacity: 0.75; }
    50% { filter: blur(8px) brightness(1.5); opacity: 0.9; }
  }
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-pulse-border {
    animation: pulse-border 4s infinite ease-in-out;
  }
  .animate-neon-glow {
    animation: neon-glow 3s infinite alternate ease-in-out;
  }
  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  /* Aspect Ratio Utility Classes (modern alternative to aspect-w/h) */
  /* For Tailwind JIT/v3: Enable 'aspectRatio' in tailwind.config.js */
  /* If not using JIT or v3, include these manually: */
  .aspect-w-1 {
    aspect-ratio: 1 / 1;
  }
</style>

Componente Captcha minimalista

Un componente CAPTCHA simple, receptivo y minimalista diseñado para tableros, que utiliza un esquema de color monocromático y admite el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-md bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6">
      Are you human?
    </h2>

    <div class="flex flex-col items-center gap-4 mb-6">
      <div class="w-full h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
        <img src="https://picsum.photos/250/80?random=1" alt="Captcha image" class="w-full h-full object-cover rounded-sm border border-gray-300 dark:border-gray-600">
      </div>
      <button type="button" class="flex items-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md py-1 px-2">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 11m7 11v-5h.582m-15.356-2A8.001 8.001 0 0120 13l-2.199-1.857L20 13c-.161 4.545-3.535 8-7.794 8A7.962 7.962 0 014 12.01

Componente CAPTCHA skeuomórfico

Un componente CAPTCHA esqueuomórfico moderadamente complejo diseñado con tonos azules corporativos, adecuado para sistemas de reserva y reservas. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, imitando elementos digitales del mundo real.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t border-l border-blue-50 dark:border-gray-600 p-6 sm:p-8 relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-200/50 before:to-blue-400/50 dark:before:from-gray-800/50 dark:before:to-gray-950/50 before:rounded-2xl before:blur-xl before:opacity-30 before:-z-10
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] after:from-blue-100/30 after:via-blue-50/10 after:to-transparent dark:after:from-gray-600/30 dark:after:via-gray-700/10 dark:after:to-transparent after:rounded-2xl after:-z-10">

    <div class="flex items-center space-x-3 mb-6">
      <svg class="h-8 w-8 text-blue-700 dark:text-blue-400 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.92c-.225.86.147 1.767.93 2.22a12.035 12.035 0 0010.51 3.251c.905-.182 1.706-.577 2.404-1.127a12.003 12.003 0 003.53-3.66c.383-.75.393-1.637.087-2.399A12.008 12.008 0 0021.08 6.92a12.01 12.01 0 00-.73-2.936z" />
      </svg>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-900 dark:text-gray-100 text-shadow-sm">Verify You're Human</h2>
    </div>

    <p class="text-blue-800 dark:text-gray-200 mb-6 leading-relaxed">
      To proceed with your booking, please complete the CAPTCHA challenge below.
    </p>

    <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-xl shadow-inner border border-blue-200 dark:border-gray-700 mb-6">
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2 text-blue-700 dark:text-blue-300 font-semibold mb-3 border-b border-blue-200/50 dark:border-gray-600/50 pb-2 flex items-center">
           <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2zM9 22V12h6v10" />
            </svg>
          Select all squares containing a <span class="text-blue-900 dark:text-white font-bold ml-1">house</span>.
        </div>

        <div class="captcha-grid grid grid-cols-3 gap-2">
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/10/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/433/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/292/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/400/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/296/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1025/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/29/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1074/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/196/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <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-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex items-center justify-center w-full sm:w-auto px-6 py-3 bg-blue-700 text-white rounded-xl shadow-md hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out
        relative overflow-hidden group
        after:absolute after:top-0 after:left-0 after:w-0 after:h-full after:bg-white/20 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full">
        <svg class="h-5 w-5 mr-2 -ml-1 text-white group-hover:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span class="relative z-10">Refresh</span>
      </button>
      <button type="submit" class="flex items-center justify-center w-full sm:w-auto px-8 py-3 bg-gradient-to-br from-blue-600 to-blue-800 text-white font-bold rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 dark:from-blue-500 dark:to-blue-700 dark:hover:from-blue-600 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out
        relative overflow-hidden group
        before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-white/20 before:transition-all before:duration-300 before:ease-in-out group-hover:before:w-full">
        <span class="relative z-10">Verify</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-white group-hover:text-blue-50 z-10" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <p class="text-xs text-blue-600 dark:text-gray-400 mt-6 text-center">
      Your privacy matters. This helps us ensure a secure experience for all users.
    </p>

  </div>
</div>

Componente CAPTCHA - Acuarela/Artístico

Un componente CAPTCHA simple y receptivo con un diseño artístico / acuarela, combinación de colores de alto contraste y compatibilidad con modo oscuro, adecuado para aplicaciones industriales / de fabricación.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden relative border border-solid border-gray-300 dark:border-gray-700
              bg-gradient-to-br from-blue-50 dark:from-blue-950 to-purple-50 dark:to-purple-950
              transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Artistic Background Elements (simulated with layered divs and subtle effects) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full mix-blend-multiply filter blur-lg opacity-60"></div>
    </div>

    <div class="relative z-10 p-8">
      <h2 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4 text-center tracking-tight leading-tight"
          style="font-family: 'Times New Roman', serif;">Security Check</h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">
        To proceed, please verify you are human.
      </p>

      <div class="flex flex-col items-center mb-6">
        <!-- CAPTCHA Image Placeholder -->
        <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden border border-purple-400 dark:border-purple-600 shadow-md mb-4 flex items-center justify-center relative">
          <img src="https://picsum.photos/300/150?blur=5&random=1" alt="CAPTCHA Challenge" class="absolute inset-0 w-full h-full object-cover filter brightness-75 dark:brightness-50 opacity-80">
          <span class="relative z-10 text-3xl font-bold italic text-white dark:text-gray-200 tracking-wider select-none transform -rotate-3 blur-[0.7px]">
            A0bK9x
          </span>
        </div>

        <button class="flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7 0 0116 0V3a1 1 0 112 0v2.101a7.002 7 0 01-16 0V3a1 1 0 011-1zm6 4a4 4 0 100 8a4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
          </svg>
          Get a new challenge
        </button>
      </div>

      <form>
        <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Enter the characters</label>
        <input type="text" id="captcha-input" placeholder="Enter the characters above" class="w-full px-4 py-2 mb-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-2 border-purple-500 dark:border-purple-400 rounded-md shadow-sm
                focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent
                placeholder-gray-400 dark:placeholder-gray-500 transition duration-200 ease-in-out text-center tracking-wider font-semibold">

        <button type="submit" class="w-full py-2 px-4 rounded-md text-lg font-bold text-white shadow-lg
                bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 ease-in-out
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900
                transform hover:scale-[1.02]">Verify</button>
      </form>
    </div>
  </div>
</div>

Monospace_Developer_CAPTCHA_Component

Un componente CAPTCHA complejo inspirado en el código con una fuente monoespaciada, estética de terminal y una combinación de colores complementaria, diseñado para un portafolio para mostrar el trabajo. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-2 border-green-500 dark:border-purple-500 transform transition-all duration-300 hover:scale-105">
    <div class="bg-green-600 dark:bg-purple-600 p-3 flex items-center justify-between">
      <div class="flex space-x-2">
        <span class="p-1.5 rounded-full bg-red-500"></span>
        <span class="p-1.5 rounded-full bg-yellow-500"></span>
        <span class="p-1.5 rounded-full bg-green-500"></span>
      </div>
      <p class="text-white opacity-90 text-sm">$ interactive_captcha.sh</p>
      <button aria-label="Minimize window" class="text-white text-lg leading-none align-middle transform rotate-45 hover:text-gray-300 transition-colors duration-200">+</button>
    </div>
    <div class="p-6 space-y-6 text-gray-800 dark:text-gray-200">
      <p class="text-lg font-bold text-green-700 dark:text-purple-400">// SYSTEM_INIT: Verifying Human Identity...</p>
      <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-md border border-gray-700 dark:border-gray-600 shadow-inner flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 items-center justify-between">
        <div class="flex-shrink-0 w-32 h-24 bg-gray-900 dark:bg-gray-800 rounded-sm overflow-hidden border border-gray-600 dark:border-gray-500 flex items-center justify-center">
          <img src="https://picsum.photos/seed/captcha1/128/96" alt="CAPTCHA image" class="w-full h-full object-cover grayscale opacity-80">
        </div>
        <div class="flex-grow text-sm text-gray-200 dark:text-gray-300">
          <p class="mb-2">&gt; Type the characters you see in the image:</p>
          <div class="flex space-x-2">
            <span class="px-2 py-1 bg-green-500 text-gray-900 rounded inline-block transform -rotate-6 text-lg font-extrabold shadow-md">A</span>
            <span class="px-2 py-1 bg-yellow-500 text-gray-900 rounded inline-block transform rotate-3 text-lg font-extrabold shadow-md">b</span>
            <span class="px-2 py-1 bg-blue-500 text-gray-900 rounded inline-block transform -rotate-2 text-lg font-extrabold shadow-md">C</span>
            <span class="px-2 py-1 bg-red-500 text-gray-900 rounded inline-block transform rotate-5 text-lg font-extrabold shadow-md">1</span>
            <span class="px-2 py-1 bg-purple-500 text-gray-900 rounded inline-block transform -rotate-4 text-lg font-extrabold shadow-md">2</span>
          </div>
        </div>
      </div>
      <div class="space-y-4">
        <label for="captcha-input" class="block text-sm font-semibold text-green-600 dark:text-purple-400">$USER_INPUT:</label>
        <input type="text" id="captcha-input" placeholder="&gt; your_response_here" class="w-full p-3 rounded-md bg-gray-900 dark:bg-gray-700 text-green-300 dark:text-purple-300 border border-green-700 dark:border-purple-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500 font-mono text-base shadow-sm leading-relaxed caret-green-500 dark:caret-purple-500">
        <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
          <button class="flex-1 py-3 px-6 bg-green-600 hover:bg-green-700 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            VERIFY <span class="hidden sm:inline">[ACCEPT]</span>
          </button>
          <button class="flex-1 py-3 px-6 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13v-1m6.7-6.7L7 7m0 0l-3.72 3.72M7 7V4"></path></svg>
            RELOAD <span class="hidden sm:inline">[TRY_AGAIN]</span>
          </button>
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">// STATUS: Awaiting input from user...</p>
    </div>
    <div class="bg-gray-800 dark:bg-gray-700 p-3 pt-2 text-xs text-gray-400 dark:text-gray-500 flex justify-between items-center">
      <p>@ 2023 INTERACTIVE_DEV.SYS</p>
      <a href="#" class="text-green-500 dark:text-purple-400 hover:underline">help.md</a>
    </div>
  </div>
</div>

Componente CAPTCHA

Un componente CAPTCHA inspirado en Material Design con una combinación de colores vibrantes, diseñado para aplicaciones de redes sociales. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans tracking-wide">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl sm:p-5 p-4">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white capitalize">I'm not a robot</h2>
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-6">
      <img src="https://picsum.photos/id/237/100/100" alt="Image Grid 1" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/238/100/100" alt="Image Grid 2" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/239/100/100" alt="Image Grid 3" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/240/100/100" alt="Image Grid 4" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/241/100/100" alt="Image Grid 5" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/242/100/100" alt="Image Grid 6" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/243/100/100" alt="Image Grid 7" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/244/100/100" alt="Image Grid 8" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/245/100/100" alt="Image Grid 9" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
    </div>

    <p class="mb-6 text-gray-600 dark:text-gray-300 text-sm md:text-base">Please select all squares with <span class="font-semibold text-indigo-700 dark:text-indigo-400">vehicles</span>.</p>

    <div class="flex justify-end">
      <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Verify
      </button>
    </div>

    <div class="flex items-center justify-between text-xs mt-6 text-gray-500 dark:text-gray-400">
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Privacy</a>
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Terms</a>
    </div>
  </div>
</div>

Componente CAPTCHA

Un componente CAPTCHA complejo y responsivo con un estilo de diseño de tipografía suiza/internacional y una combinación de colores vibrantes, adecuado para herramientas de CRM/negocios. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6 md:p-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center sm:text-3xl lg:text-4xl">
      Security Check
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 text-center leading-relaxed mb-4">
      Please complete the security check to proceed.
    </p>

    <div class="space-y-4">
      <!-- CAPTCHA Display Area -->
      <div class="relative bg-gradient-to-r from-red-500 via-pink-500 to-purple-500 p-1 rounded-md shadow-inner">
        <div class="w-full h-24 sm:h-32 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <span class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-800 dark:text-blue-200 tracking-widest leading-none select-none italic transform -rotate-6">
            kL5pQRt9
          </span>
          <!-- Noise Overlay -->
          <div class="absolute inset-0 bg-gradient-to-br from-transparent to-black opacity-10 dark:opacity-20 pointer-events-none"></div>
          <div class="absolute inset-0 flex items-center justify-center p-2">
            <!-- Placeholder lines or distortions -->
            <div class="w-full h-px bg-yellow-400 absolute top-1/3 left-0 transform rotate-3"></div>
            <div class="w-full h-px bg-green-400 absolute bottom-1/4 right-0 transform -rotate-5"></div>
          </div>
        </div>
      </div>

      <!-- Input Field -->
      <div>
        <label for="captcha-input" class="sr-only">Enter CAPTCHA here</label>
        <input type="text" id="captcha-input" placeholder="Enter the text above" class="w-full p-3 sm:p-4 border border-blue-400 dark:border-blue-600 rounded-md focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 dark:focus:border-blue-700 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 outline-none text-base sm:text-lg tracking-wider transition-all duration-200 ease-in-out">
      </div>

      <!-- Action Buttons -->
      <div class="grid grid-cols-2 gap-3 sm:gap-4 md:flex md:justify-end md:space-x-4">
        <button type="button" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-medium rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005 7c-1.378 0-2.684.254-3.86-.713a1 1 0 010-1.419A1 1 0 012 4h-.002zm14 8a1 1 0 01-1 1v2.101a7.002 7.002 0 01-11.601 2.566 1 1 0 111.885.666A5.002 5.002 0 0015 13c1.378 0 2.684.254 3.86.713a1 1 0 010 1.419A1 1 0 0118 16h-.002z" clip-rule="evenodd" />
          </svg>
          Refresh
        </button>

        <button type="submit" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-semibold rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-gradient-to-r from-teal-500 to-emerald-600 text-white hover:from-teal-600 hover:to-emerald-700 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg">
          Verify
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
        </button>
      </div>
    </div>

    <div class="pt-4 border-t border-gray-200 dark:border-gray-700 text-center">
      <p class="text-xs text-gray-500 dark:text-gray-400">
        Having trouble? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Contact support</a>
      </p>
    </div>
  </div>
</div>

RetroCaptchaComponent

Un componente CAPTCHA simple de temática retro con una paleta de colores verde bosque, diseñado para sitios web sin fines de lucro / caridad. Cuenta con capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-sm p-6 bg-lime-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-lime-600 dark:border-emerald-600 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
    <h2 class="text-2xl font-bold text-lime-900 dark:text-lime-200 mb-4 text-center tracking-wider uppercase drop-shadow-md">Are you human?</h2>
    <p class="text-sm text-lime-800 dark:text-lime-300 mb-6 text-center italic">Help us fight spam and protect our community.</p>

    <div class="flex flex-col items-center space-y-4">
      <div class="w-full bg-lime-200 dark:bg-gray-700 p-3 rounded-md border-2 border-lime-600 dark:border-emerald-600 relative overflow-hidden">
        <img src="https://picsum.photos/300/100?random=1" alt="CAPTCHA image" class="w-full h-24 object-cover rounded filter grayscale sepia brightness-90 contrast-120 blur-sm">
        <div class="absolute inset-0 bg-lime-300 dark:bg-gray-600 mix-blend-multiply opacity-75"></div>
        <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-lime-900 dark:text-emerald-900 font-extrabold tracking-widest uppercase rotate-3 select-none" style="text-shadow: 2px 2px 
#a3e635, 4px 4px #4D7C0F;">rUn34r</p>
        <button class="absolute top-2 right-2 text-lime-800 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-100 transition-colors duration-200" aria-label="Refresh CAPTCHA">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.197-.736 4.22-1.99 5.864M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.197.736-4.22 1.99-5.864" />
          </svg>
        </button>
      </div>

      <input type="text" placeholder="Enter the text above" class="w-full px-4 py-2 text-lime-900 dark:text-lime-100 bg-lime-100 dark:bg-gray-700 border-2 border-lime-600 dark:border-emerald-600 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 placeholder-lime-700 dark:placeholder-lime-300 text-center tracking-wide font-bold uppercase" aria-label="CAPTCHA input field">

      <button class="w-full px-6 py-3 bg-lime-700 dark:bg-emerald-700 text-lime-50 dark:text-emerald-50 font-bold uppercase rounded-md shadow-md hover:bg-lime-800 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 transform hover:scale-105 transition-all duration-300 ease-in-out text-lg tracking-wider">
        Verify
      </button>
      <button class="text-sm text-lime-800 dark:text-lime-300 hover:text-lime-900 dark:hover:text-lime-200 transition-colors duration-200" aria-label="Report an issue with CAPTCHA">
        Can't read the image?
      </button>
    </div>
  </div>
</div>