製品比較コンポーネント
グレースケールの配色を使用したダークモード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>関連コンポーネント
製品比較コンポーネント
glassmorphism デザイン、アース トーンの配色、およびダーク モードのサポートを備えた、シンプルで応答性の高い製品比較コンポーネントです。2枚の商品カードを大きな画面で並べて表示し、小さな画面では積み重ねて表示します。
製品比較コンポーネント - オーガニック/自然にインスパイアされた秋の色
有機的/自然にインスパイアされたデザインで、秋の色を使用した複雑で応答性の高い製品比較コンポーネント。スポーツやフィットネスのアプリケーションに適しており、ダークモードを完全にサポートしています。
製品比較コンポーネント
オーガニック/自然にインスパイアされたデザイン、補色配色、ダークモードサポート、スポーツ/フィットネスアプリケーション向けに調整された、複雑で応答性の高い製品比較コンポーネント。流れるようなラインと自然なフォルムが特徴。