Компоненты КАПЧА Компонент 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 со стилем оформления glassmorphism. Идеально подходит для веб-сайтов электронной коммерции, имеет полупрозрачный эффект, похожий на матовое стекло, поддержку темного режима и цветовую схему в оттенках серого.

Открытый

Ретро/винтажный компонент CAPTCHA

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

Открытый