Product Reviews コンポーネント
グレースケールの配色でマテリアルデザインスタイルでデザインされたシンプルな製品レビューコンポーネント。
HTMLコード
<div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
<div class="mt-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">5 stars</p>
<p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">4 stars</p>
<p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">3 stars</p>
<p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
製品レビューコンポーネント - 紙/印刷-ネオン/電気
紙/印刷物にインスパイアされたデザインとネオン/エレクトリックカラースキームを備えたシンプルでレスポンシブな製品レビューコンポーネントで、ドキュメントやWikiサイトに適しています。ダークモードのサポートが含まれています。
商品レビューコンポーネント - 遊び心のあるジュエルトーンと予約フォーカス
ブッキング/予約に焦点を当てた、複雑で遊び心のある商品レビューコンポーネント。ジュエルトーンの色、丸みを帯びた要素、ダークモードをサポートする完全な応答性を備えています。
Product Reviews コンポーネント
ソーシャルメディアインターフェース用に設計されたミニマリストの製品レビューコンポーネントで、トライアドの配色とインタラクティブな要素を統合しています。