バッジコンポーネント
ブログやコンテンツの消費のための3Dの美的感覚と補完的な配色で設計されたシンプルでレスポンシブなバッジコンポーネント。ダークモードをサポートします。
HTMLコード
<div class="flex flex-wrap p-5 justify-center">
<div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 1</span>
</div>
<p class="text-sm mt-2">This is a description for badge 1.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 2</span>
</div>
<p class="text-sm mt-2">This is a description for badge 2.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 3</span>
</div>
<p class="text-sm mt-2">This is a description for badge 3.</p>
</div>
</div>関連コンポーネント
オーガニックネイチャーインスパイアードバッジ
自然にインスパイアされた流れるようなラインとトライアドの配色を備えた適度な複雑さのバッジコンポーネントは、作品や製品を紹介するポートフォリオに適しています。これには、応答性とダークモードのサポートが含まれています。
Industrial_Candy_Finance_Badges_Component
金融/銀行向けの複雑なバッジコンポーネントで、工業的な美学と明るいキャンディーカラーを融合させています。複数のインタラクティブバッジ、レスポンシブデザイン、ダークモードのサポートを備えています。
バッジ コンポーネント - 3D 類似ダッシュボード
3Dデザイン、類似の配色、適度な複雑さ、ダッシュボードのダークテーマサポートを備えたレスポンシブバッジコンポーネント。Tailwind CSS クラスのみを使用します。