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>

関連コンポーネント

バッジコンポーネント

予約/予約システム用に設計されたすっきりとしたミニマリストのバッジコンポーネントで、レスポンシブレイアウト、パステルカラースキーム、ダークモードのサポートを特徴とし、スイス/インターナショナルタイポグラフィに触発されています。

開ける

バッジコンポーネント

アースカラーを使用した 3D スタイルでデザインされたレスポンシブ バッジ コンポーネントで、ダッシュボードに適したインタラクティブな要素が特徴です。

開ける

バッジコンポーネント

バッジコンポーネント - レスポンシブエフェクトとダークテーマのサポートを備えたミニマリスト/フラットデザイン。JavaScriptは不要で、Tailwindを使用した純粋なHTMLとCSSです。

開ける