Componentes CAPTCHA Componente CAPTCHA skeuomórfico
Componente CAPTCHA skeuomórfico

Un componente CAPTCHA esqueuomórfico diseñado para sitios web de eventos/conferencias, con un esquema de color triádico y compatibilidad con el modo oscuro. Imita elementos digitales del mundo real con botones interactivos.
Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-xl border border-gray-400 dark:border-gray-600 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01] overflow-hidden relative">
    <!-- Top 'screen' bezel effect -->
    <div class="absolute top-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-t-3xl shadow-inner-top blur-sm"></div>
    <div class="absolute bottom-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-b-3xl shadow-inner-bottom blur-sm"></div>

    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Verify you are human!</h2>

      <div class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 mb-8 border border-gray-300 dark:border-gray-600 shadow-inner flex flex-col items-center space-y-4">
        <p class="text-lg text-gray-700 dark:text-gray-200 text-center mb-4">Please select all squares with:</p>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-teal-400 drop-shadow-lg">Traffic Lights</div>

        <div class="grid grid-cols-3 gap-3 w-full max-w-xs mx-auto">
          <!-- Captcha Grid Items -->
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=1" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=2" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=3" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=4" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=5" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=6" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=7" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=8" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=9" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex justify-between items-center">
        <button class="px-6 py-3 bg-gradient-to-br from-yellow-300 to-amber-400 dark:from-yellow-600 dark:to-orange-700 text-gray-800 dark:text-gray-100 font-semibold rounded-xl shadow-lg border border-yellow-500 dark:border-orange-800 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:ring-opacity-70 dark:focus:ring-orange-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Refresh</span>
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>

        <button class="px-8 py-3 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 text-white font-semibold rounded-xl shadow-lg border border-blue-700 dark:border-indigo-900 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-indigo-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Verify</span>
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Just for demonstration: Simulate click effect with JS (not part of the deliverable) -->
<script>
  document.querySelectorAll('.captcha-grid-item').forEach(button => {
    button.addEventListener('click', () => {
      button.classList.toggle('is-selected');
    });
  });
</script>

<style>
  .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .drop-shadow-md {
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  }
  .drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  }
</style>
Componentes relacionados

Componente CAPTCHA

Un componente CAPTCHA de diseño minimalista / plano para la exhibición de portafolios, receptivo con soporte para modo oscuro.
Abrir
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
Componente CAPTCHA de Material Design

Un componente CAPTCHA responsivo diseñado con los principios de Material Design, incluida la compatibilidad con temas oscuros.
Abrir