Componenti CAPTCHA Componente CAPTCHA

Componente CAPTCHA

Un componente CAPTCHA dal design minimalista/piatto per la presentazione del portfolio, reattivo con supporto per la modalità oscura.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded-lg border border-gray-300 dark:border-gray-600" />
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please complete the CAPTCHA to prove you are human.</p>
    <div class="flex flex-col space-y-4 w-full">
        <input type="text" placeholder="Enter the characters you see" class="border border-gray-300 dark:border-gray-600 rounded p-2 focus:outline-none focus:ring focus:ring-gray-500 dark:focus:ring-gray-600" />
        <button class="bg-gray-800 text-white rounded p-2 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Submit</button>
    </div>
    <div class="flex items-center justify-between mt-4 text-sm text-gray-600 dark:text-gray-400">
        <span>Need a new CAPTCHA? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Refresh</a></span>
        <span>Help? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact Us</a></span>
    </div>
</div>

Componenti correlati

Componente CAPTCHA brutalista

Un componente CAPTCHA progettato in stile brutalista, con contrasto elevato, layout insoliti ed effetti reattivi con supporto per temi scuri.

Aperto

Componente CAPTCHA di neumorfismo

Un componente CAPTCHA reattivo e complesso progettato in uno stile neumorfico per siti di e-commerce, con supporto per temi scuri, utilizzando Tailwind CSS.

Aperto

Componente CAPTCHA di progettazione dei materiali

Un componente CAPTCHA reattivo con i principi del Material Design, incluso il supporto del tema scuro.

Aperto