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

バッジコンポーネント

ソーシャルメディア用のシンプルなGlassmorphismスタイルのバッジコンポーネントで、ぼかし付きのすりガラス効果、類似の色、Tailwind CSSを使用したダークモードのサポートが特徴です。レスポンシブで、画像にはpicsum.photosを使用し、必要に応じてアバターには randomuser.me を使用します。JavaScriptは含まれていません。

プレビュー

HTMLコード 

<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
    #SocialLife
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
    #Connections
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
    #Community
  </span>
</div>

関連コンポーネント

バッジコンポーネント

マテリアルデザインスタイル、ダークテーマのサポート、ブログコンテンツのアーストーンの配色を備えたレスポンシブバッジコンポーネント。

開ける

バッジコンポーネント

Tailwind CSS を使用して設計された、マイクロインタラクションとダークテーマのサポートを備えたレスポンシブバッジコンポーネント。このコンポーネントにはホバー効果が含まれており、アバターのプレースホルダー画像を使用します。

開ける

Memphis_Pastel_Food_Badges_Component

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

開ける