CCHub Logo CCHub Tailwind Collection
コンポーネント バッジ バッジコンポーネント

バッジコンポーネント

ダークモードをサポートするシンプルで応答性の高いバッジコンポーネントで、ポートフォリオに適したトライアドカラースキームを使用します。

プレビュー

HTMLコード 

<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

関連コンポーネント

Microinteractions Badges コンポーネント

パステルカラーの複雑で応答性の高いバッジコンポーネントは、コンサルティング/サービス用に設計されており、ホバーマイクロインタラクションとダークモードのサポートを特徴としています。各バッジは、ホバーするとわずかに拡大し、より多くのコンテキストが表示されます。

開ける

バッジコンポーネント

テクノロジー/SaaSアプリケーション向けのマテリアルデザインにインスパイアされたバッジのセットで、黒と白の配色とアクセントカラー、レスポンシブレイアウト、ダークモードのサポートが特徴です。

開ける

バッジコンポーネント - ダークモード、アーストーン

ダークモードのブログ/コンテンツインターフェイス用にアースカラーで設計された複雑なバッジコンポーネントシステム。このコンポーネントには、記事カテゴリ、ユーザーステータス、コンテンツタグ、通知、および実績インジケータのさまざまなバッジタイプが含まれています。すべてダークモードをサポートする自然なアースカラーを使用しています。デザインは完全にレスポンシブで、さまざまな画面サイズに適応します。

開ける