Ретро компонент CAPTCHA
Компонент CAPTCHA, выполненный в стиле ретро/винтаж в пастельных тонах, предназначен для панелей визуализации данных с поддержкой темного режима.
HTML-код
<div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
<p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
</div>
<div class="flex flex-col items-center mt-6">
<label class="flex items-center mb-4">
<input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
<span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
</label>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>
Связанные компоненты
Ретро винтажная капча для социальных сетей
Ретро-винтажный компонент CAPTCHA для социальных сетей, с яркими цветами, умеренной сложностью, отзывчивостью и поддержкой темного режима с использованием Tailwind CSS.
Ретро/винтажный компонент CAPTCHA
Компонент CAPTCHA в ретро-стиле, разработанный для интерфейсов социальных сетей, отличается яркими цветами и сложным макетом с адаптивным дизайном и поддержкой темных тем.
Компонент CAPTCHA
Компонент CAPTCHA в стиле Glassmorphism с триадической цветовой схемой, подходящий для платформ социальных сетей. Имеет матовые полупрозрачные элементы с эффектом размытия, средней сложности и некоторыми интерактивными функциями. Дизайн отзывчивый и включает поддержку темного режима.