CCHub Logo CCHub Tailwind Collection
コンポーネント バッジ パステルバッジダークモードUI

パステルバッジダークモードUI

パステルカラーのダークモードUIを特徴とする、ビジネスWebサイト用のシンプルでレスポンシブなバッジコンポーネント。Tailwind CSSで設計されており、暗い背景を使用して目の疲れを軽減し、レスポンシブレイアウトをサポートします。

プレビュー

HTMLコード 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

関連コンポーネント

バッジコンポーネント

ビジネス/企業のWebサイト向けに設計された汎用性の高いバッジコンポーネントで、ダークモードUIでアースカラーを利用してユーザーエクスペリエンスを向上させます。このコンポーネントは、いくつかの対話型要素による応答性を備えています。

開ける

Microinteractions Badges コンポーネント

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

開ける

バッジコンポーネント

バッジコンポーネント - レスポンシブエフェクトとダークテーマのサポートを備えたミニマリスト/フラットデザイン。JavaScriptは不要で、Tailwindを使用した純粋なHTMLとCSSです。

開ける