HTMLコード
<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
<div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
<span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
<span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
<span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
<span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
<span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
</div>
</div>関連コンポーネント
バッジコンポーネント
バッジコンポーネント - レスポンシブエフェクトとダークテーマのサポートを備えたミニマリスト/フラットデザイン。JavaScriptは不要で、Tailwindを使用した純粋なHTMLとCSSです。
Industrial_Candy_Finance_Badges_Component
金融/銀行向けの複雑なバッジコンポーネントで、工業的な美学と明るいキャンディーカラーを融合させています。複数のインタラクティブバッジ、レスポンシブデザイン、ダークモードのサポートを備えています。
バッジコンポーネント
マイクロインタラクションで設計されたレスポンシブバッジコンポーネントで、補色の配色とダークテーマのサポートが特徴です。ビジネスや企業のWebサイトに最適なこのコンポーネントには、ユーザーのアクションに応答する魅力的なアニメーションが含まれています。ホバー効果などの前述の視覚的な手がかりは、ユーザーエクスペリエンスを向上させます。