CCHub Logo CCHub Tailwind Collection
コンポーネント キャプチャ ミニマリストキャプチャコンポーネント

ミニマリストキャプチャコンポーネント

ダッシュボード用に設計されたシンプルでレスポンシブなミニマリストのCAPTCHAコンポーネントで、単色の配色を使用し、ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-md bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6">
      Are you human?
    </h2>

    <div class="flex flex-col items-center gap-4 mb-6">
      <div class="w-full h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
        <img src="https://picsum.photos/250/80?random=1" alt="Captcha image" class="w-full h-full object-cover rounded-sm border border-gray-300 dark:border-gray-600">
      </div>
      <button type="button" class="flex items-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md py-1 px-2">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 11m7 11v-5h.582m-15.356-2A8.001 8.001 0 0120 13l-2.199-1.857L20 13c-.161 4.545-3.535 8-7.794 8A7.962 7.962 0 014 12.01

関連コンポーネント

Monospace_Developer_CAPTCHA_Component

モノスペースフォント、端末の美学、補色スキームを備えた、コードにインスパイアされた複雑なCAPTCHAコンポーネントで、ポートフォリオが作品を紹介するように設計されています。ダークモードのサポートにより完全にレスポンシブ。

開ける

CAPTCHAコンポーネント

Glassmorphism スタイルの CAPTCHA コンポーネントで、トライアドのカラースキームで、ソーシャル メディア プラットフォームに適しています。ぼかし効果のあるすりガラスのような半透明の要素を備え、中程度の複雑さといくつかのインタラクティブ機能を備えています。デザインはレスポンシブで、ダークモードのサポートが含まれています。

開ける

CAPTCHAコンポーネント

ソーシャルメディアインターフェース用に設計された、キャンディー/スウィートカラースキームを備えた、コードにインスパイアされた複雑なCAPTCHAコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブな要素を備えています。

開ける