Product Reviews コンポーネント
レスポンシブ製品レビューコンポーネント、ブルータリズムデザイン、単色の配色、Eコマースの複雑な複雑さ、ダークテーマのサポート
HTMLコード
<div class="bg-gray-900 text-white p-8 min-h-screen">
<div class="container mx-auto">
<h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Review Card 1 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Sarah Johnson</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 2 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">David Chen</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 3 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Emily Davis</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Good value for the price."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 4 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Michael Brown</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Solid product, works as expected."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
商品レビューコンポーネント - 遊び心のあるジュエルトーンと予約フォーカス
ブッキング/予約に焦点を当てた、複雑で遊び心のある商品レビューコンポーネント。ジュエルトーンの色、丸みを帯びた要素、ダークモードをサポートする完全な応答性を備えています。
Product Reviews コンポーネント
製品レビューコンポーネントは、3Dデザイン要素、レスポンシブエフェクト、およびTailwind CSSを使用したダークテーマのサポートを備えています。
レトロな製品レビューカード
レトロ/ビンテージの美学でデザインされた製品レビューコンポーネントで、トライアドの配色(ティール、フクシア、アンバー)を使用しています。シンプルで応答性が高く、ダークモードをサポートし、製品のフィードバックを紹介するポートフォリオに適しています。Tailwind CSSを使用します。