パステルバッジダークモード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>関連コンポーネント
バッジコンポーネント
レトロなテーマのバッジコンポーネントで、グレースケールの配色で、ブログやコンテンツサイトに適しています。複数のインタラクティブ要素と完全な応答性を特徴とし、ダークモードをサポートしています。この設計では、JavaScript を回避し、HTML と Tailwind CSS のみに依存しています。
Industrial_Candy_Finance_Badges_Component
金融/銀行向けの複雑なバッジコンポーネントで、工業的な美学と明るいキャンディーカラーを融合させています。複数のインタラクティブバッジ、レスポンシブデザイン、ダークモードのサポートを備えています。