Product Reviews コンポーネント
レトロ/ビンテージスタイル、アースカラーの配色、適度な複雑さの製品レビューコンポーネント、レスポンシブデザイン、ダークテーマのサポート。スタイリングにはTailwind CSS、商品画像にはpicsum.photos、アバターには randomuser.me を使用します。JavaScript はありません。
HTMLコード
<div class="container mx-auto p-4 font-mono">
<!-- Light Mode -->
<div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
<h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Review 1 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">John Doe</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star_half</span>
</div>
</div>
</div>
<p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
<img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
</div>
<!-- Review 2 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">Jane Smith</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
</div>
</div>
</div>
<p class="italic mb-4">"I関連コンポーネント
Product Reviews コンポーネント
Tailwind CSSを使用して設計されたミニマリスト製品レビューコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。
商品レビューコンポーネント - 遊び心のあるジュエルトーンと予約フォーカス
ブッキング/予約に焦点を当てた、複雑で遊び心のある商品レビューコンポーネント。ジュエルトーンの色、丸みを帯びた要素、ダークモードをサポートする完全な応答性を備えています。