Product Reviews コンポーネント
マテリアルデザイン、レスポンシブエフェクト、ダークテーマのサポートを備えた製品レビューコンポーネント。
HTMLコード
<div class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
</div>
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
</p>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
</div>
<p class="text-gray-700 dark:text-gray-300">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
</div>関連コンポーネント
Product Reviews コンポーネント
製品のユーザーレビューを表示する Web コンポーネントで、Tailwind CSS を使用したマイクロインタラクションとダークテーマのサポートが特徴です。
Product Reviews コンポーネント
Neumorphismスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えたTailwind CSSを使用した製品レビューコンポーネント。JavaScript コードは含まれていません。プレースホルダー画像とアバターが使用されます。