製品比較コンポーネント
グレースケールの配色を使用したダークモードUI用に設計されたシンプルな製品比較コンポーネントです。最小限の要素を使用した基本的なレイアウトが特徴で、ブログのコンテンツや読書目的に最適です。
HTMLコード
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-4">Product Comparison</h2>
<table class="min-w-full">
<thead>
<tr class="bg-gray-700">
<th class="px-4 py-2">Feature</th>
<th class="px-4 py-2">Product A</th>
<th class="px-4 py-2">Product B</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Price</td>
<td class="px-4 py-2">$199</td>
<td class="px-4 py-2">$249</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Rating</td>
<td class="px-4 py-2">⭐⭐⭐⭐</td>
<td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Warranty</td>
<td class="px-4 py-2">1 Year</td>
<td class="px-4 py-2">2 Years</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Image</td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
</tr>
</tbody>
</table>
<div class="flex justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
<span class="ml-2">Reviewed by John Doe</span>
</div>
<a href="#" class="text-blue-400 hover:underline">Read More</a>
</div>
</div>関連コンポーネント
製品比較コンポーネント
ダークテーマをサポートするレスポンシブ製品比較コンポーネントで、ミニマリスト/フラットなデザインとパステルカラーの配色が特徴です。この複雑なコンポーネントはダッシュボードに適しており、ユーザーは詳細な仕様とインタラクティブな要素を持つ複数の製品を比較できます。
EarthyProduct比較
3 つの商品カードを備えた、e コマース向けのレスポンシブ商品比較コンポーネント。アースカラーの配色(ブラウン、グリーン、アンバー)と、奥行きとエンゲージメントのためのシャドウやアクセントバーなどのシンプルな3Dデザイン要素を使用して、Tailwind CSSでスタイリングされています。ダークモードのサポートが含まれており、picsum.photos のプレースホルダー画像を使用します。
製品比較コンポーネント
glassmorphism デザイン、アース トーンの配色、およびダーク モードのサポートを備えた、シンプルで応答性の高い製品比較コンポーネントです。2枚の商品カードを大きな画面で並べて表示し、小さな画面では積み重ねて表示します。