類似の配色と豊富なインターフェイスを備えたブログ用のNeumorphismスタイルのバッジコンポーネント。
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <!-- Badge 1 --> <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer"> <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <div class="flex flex-col"> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2> <p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p> </div> </div> <!-- Badge 2 --> <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer"> <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"> <div class="flex flex-col"> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2> <p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p> </div> </div> <!-- Badge 3 --> <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer"> <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"> <div class="flex flex-col"> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2> <p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p> </div> </div> <!-- Badge 4 --> <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer"> <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"> <div class="flex flex-col"> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2> <p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p> </div> </div> </div> </div>
レスポンシブエフェクトとダークテーマをサポートする Skeuomorphic Badges コンポーネント。
ブログコンテンツの使用用に設計されたニューモーフィックバッジコンポーネントで、インタラクティブな要素とダークモードをサポートするレスポンシブデザインを備えています。
Tailwind CSS を使用して設計された、魅力的なマイクロインタラクションを備えたレスポンシブ Badges コンポーネント。ダークモードをサポートし、画像のプレースホルダーが含まれています。