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

Компонент CAPTCHA

Компонент CAPTCHA, стилизованный с использованием принципов Material Design и Tailwind CSS, подходящий для веб-сайтов электронной коммерции, с поддержкой темных тем и адаптивным дизайном.

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

HTML-код

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

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

Сложный компонент CAPTCHA

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

Открытый

Минималистичная капча

Отзывчивый компонент CAPTCHA с поддержкой темного режима, отличающийся минималистичным дизайном в пастельных тонах. Включает в себя простой флажок и заполнитель для текста.

Открытый

Компонент CAPTCHA - Candy Material Design

Простой, адаптивный компонент CAPTCHA с эстетикой Material Design в стиле конфет, подходящий для веб-сайтов мероприятий и конференций. Включает поддержку темного режима.

Открытый