CCHub Logo CCHub Tailwind Collection
コンポーネント バッジ 3D_Badge_Component

3D_Badge_Component

ブログ/コンテンツ用のシンプルでレスポンシブな 3D にインスパイアされたバッジ コンポーネントで、ハイコントラスト カラーとダーク モードのサポートが特徴です。

プレビュー

HTMLコード 

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

    <!-- Badge 1: Category -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-purple-500 before:to-pink-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-purple-700 dark:text-purple-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Category
      </span>
    </div>

    <!-- Badge 2: Featured -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-blue-500 before:to-green-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-blue-700 dark:text-blue-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Featured
      </span>
    </div>

    <!-- Badge 3: New -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-red-500 before:to-orange-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-red-700 dark:text-red-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        New
      </span>
    </div>

    <!-- Badge 4: Popular -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-yellow-500 before:to-lime-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-yellow-700 dark:text-yellow-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Popular
      </span>
    </div>

    <!-- Badge 5: Trending -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-cyan-500 before:to-emerald-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-cyan-700 dark:text-cyan-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Trending
      </span>
    </div>

    <!-- Badge 6: Draft -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-400 before:to-gray-600 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-gray-600 dark:text-gray-400
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Draft
      </span>
    </div>

  </div>
</div>

関連コンポーネント

バッジコンポーネント

テクノロジー/SaaSアプリケーション向けのマテリアルデザインにインスパイアされたバッジのセットで、黒と白の配色とアクセントカラー、レスポンシブレイアウト、ダークモードのサポートが特徴です。

開ける

Microinteractions Badges コンポーネント

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

開ける

Healthcare_Badges_Component_Bauhaus

バウハウスにインスパイアされたデザインのヘルスケアをテーマにしたバッジコンポーネントで、夕焼け/温かみのある色調を使用しています。幾何学的な形状と機能的なレイアウトが特徴で、医療アプリケーションのステータスやカテゴリを表示するのに適しています。ダークモードのサポートによるレスポンシブ。

開ける