バッジコンポーネント
ソーシャルメディア用のシンプルな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デザインのレスポンシブバッジコンポーネントで、奥行きとダークテーマのサポートが特徴です。各バッジは、Tailwind CSS を使用してデザインされた名前、画像、説明を持つユーザーを表します。
レトロバッジ
補完的な配色を備えたビジネス/企業のWebサイト向けのレトロ/ビンテージバッジコンポーネント。シンプルなレイアウト、ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。