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

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

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

プレビュー

HTMLコード 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">

  <!-- Badge 1 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
    Completed
  </span>

  <!-- Badge 2 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    Failed
  </span>

  <!-- Badge 3 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    Pending
  </span>

  <!-- Badge 4 - Example with icon and no text -->
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </span>

</div>

関連コンポーネント

Memphis_Pastel_Food_Badges_Component

パステルカラーの配色でメンフィスデザインに触発された、食品/レストランのWebサイト向けの複雑でレスポンシブなバッジコンポーネント。幾何学的な形、遊び心のあるパターンが特徴で、ダークモードのサポートが含まれています。

開ける

Microinteractions Badges コンポーネント

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

開ける

バッジコンポーネント

ドキュメントや Wiki サイト向けのエレガントで応答性の高いバッジ コンポーネントで、アース カラーの配色、豪華なタイポグラフィ、完全なダーク モードのサポートが特徴です。

開ける