Компоненты КАПЧА Компонент CAPTCHA

Компонент CAPTCHA

Компонент CAPTCHA в 3D-стиле, предназначенный для информационных панелей с яркими цветами и отзывчивым дизайном, поддерживающим темный режим.

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
    <div class="w-full max-w-xs">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">  
            <img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
            <p class="ml-4">Check all images with a car</p>
        </div>
        <div class="grid grid-cols-3 gap-2 my-4">  
            <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
        </div>
        <button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
    </div>
</div>

Связанные компоненты

Компонент CAPTCHA

Скевоморфный компонент CAPTCHA, разработанный для интерфейсов социальных сетей с триадической цветовой схемой, с множеством интерактивных элементов и поддержкой темных тем.

Открытый

Компонент CAPTCHA в Баухаусе

Простой, функциональный компонент CAPTCHA в стиле Баухаус для документации/вики-сайтов, отличающийся геометрическими формами, высокой контрастностью, полной отзывчивостью и поддержкой темного режима.

Открытый

Компонент CAPTCHA

Компонент CAPTCHA в стиле Material Design для повышения безопасности веб-сайта-портфолио с темной темой и адаптивным дизайном с помощью Tailwind CSS.

Открытый