バッジコンポーネント
Glassmorphismスタイルでデザインされたレスポンシブバッジコンポーネントで、すりガラスのような半透明の要素とぼかし効果が特徴で、ダークモードをサポートしています。
HTMLコード
<div class="flex flex-wrap justify-center space-x-4 mt-10">
<!-- Badge 1 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
<p class="text-gray-500 dark:text-gray-400">UX Designer</p>
</div>
<!-- Badge 4 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
<p class="text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>