レトロバッジ

補完的な配色を備えたビジネス/企業のWebサイト向けのレトロ/ビンテージバッジコンポーネント。シンプルなレイアウト、ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

プレビュー

HTMLコード

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

関連コンポーネント

バッジコンポーネント - 3D 類似ダッシュボード

3Dデザイン、類似の配色、適度な複雑さ、ダッシュボードのダークテーマサポートを備えたレスポンシブバッジコンポーネント。Tailwind CSS クラスのみを使用します。

開ける

バッジコンポーネント

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

開ける

スキューモーフィックバッジ

スキューモーフィックなデザイン、補色配色、シンプルなレイアウトのバッジのセットで、ブログやコンテンツサイトに適しています。ダークモードのサポートによるレスポンシブ。

開ける