製品レビューコンポーネント(スキュアモーフィックパステル)
パステルカラーを使用し、ダークモードをサポートするSkeuomorphicデザインの美学でスタイリングされた、複雑で応答性の高い製品レビューコンポーネント。レイヤー化されたカード、微妙なグラデーション、影が特徴で、奥行きを演出します。アバター、名前、星評価、レビューテキスト、オプションの画像が含まれます。Tailwind CSSをJavaScriptなしで排他的に使用します。
HTMLコード
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
<!-- Reviews Header -->
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
<!-- Static Average Rating - Skeuomorphic feel -->
<div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
<span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
</div>
</div>
<!-- Reviews List -->
<div class="space-y-6">
<!-- Individual Review Card -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
</p>
<!-- Review Images - Skeuomorphic border/shadow -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
</div>
<!-- Static Helpful/Report buttons - Skeuomorphic feel -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 2 -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
</p>
<!-- No images for this review -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 3 - Lower rating -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
</p>
<!-- Review Images -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
</div>
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
</div>
</div>