Product Reviews コンポーネント
Tailwind CSSで構築されたレスポンシブ製品レビューコンポーネントで、ホバー時のマイクロインタラクション、ダークテーマのサポート、プレースホルダー画像が特徴です。JavaScriptは使用しておりません。
HTMLコード
<div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
</div>
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
</div>
</div>
</div>関連コンポーネント
レトロな製品レビューカード
レトロ/ビンテージの美学でデザインされた製品レビューコンポーネントで、トライアドの配色(ティール、フクシア、アンバー)を使用しています。シンプルで応答性が高く、ダークモードをサポートし、製品のフィードバックを紹介するポートフォリオに適しています。Tailwind CSSを使用します。
Product Reviews コンポーネント
ビジネスWebサイト向けに設計された、マイクロインタラクションを備えた複雑で魅力的な製品レビューコンポーネント。このコンポーネントは、Tailwind CSS を使用したダークをテーマにしたレスポンシブ デザインを特徴としており、アニメーションと類似の色に基づく配色が組み込まれています。
Product Reviews コンポーネント
レトロ/ビンテージスタイル、アースカラーの配色、適度な複雑さの製品レビューコンポーネント、レスポンシブデザイン、ダークテーマのサポート。スタイリングにはTailwind CSS、商品画像にはpicsum.photos、アバターには randomuser.me を使用します。JavaScript はありません。