バッジコンポーネント
Tailwind CSS を使用して設計された、マイクロインタラクションとダークテーマのサポートを備えたレスポンシブバッジコンポーネント。このコンポーネントにはホバー効果が含まれており、アバターのプレースホルダー画像を使用します。
HTMLコード
<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
<div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge One
</div>
<div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Two
</div>
<div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Three
</div>
<div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Four
</div>
<div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Five
</div>
</div>関連コンポーネント
バッジコンポーネント - ダークモード、アーストーン
ダークモードのブログ/コンテンツインターフェイス用にアースカラーで設計された複雑なバッジコンポーネントシステム。このコンポーネントには、記事カテゴリ、ユーザーステータス、コンテンツタグ、通知、および実績インジケータのさまざまなバッジタイプが含まれています。すべてダークモードをサポートする自然なアースカラーを使用しています。デザインは完全にレスポンシブで、さまざまな画面サイズに適応します。
バッジ コンポーネント - 3D 類似ダッシュボード
3Dデザイン、類似の配色、適度な複雑さ、ダッシュボードのダークテーマサポートを備えたレスポンシブバッジコンポーネント。Tailwind CSS クラスのみを使用します。