製品比較コンポーネント
Tailwind CSSを使用したダークモードをサポートする、シンプルでレスポンシブな製品比較コンポーネントです。比較のために、製品名、機能、および価格を表示します。
HTMLコード
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
</ul>
<div class="text-2xl font-bold text-center">$49/m</div>
</div>
<!-- Product 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Beta</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
</ul>
<div class="text-2xl font-bold text-center">$79/m</div>
</div>
<!-- Product 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
<li>Feature F</li>
</ul>
<div class="text-2xl font-bold text-center">$99/m</div>
</div>
</div>
</div>
</div>関連コンポーネント
ラグジュアリー製品比較
ファッション/ビューティーアイテムのラグジュアリーでプレミアムな製品比較コンポーネントで、エレガントなデザイン、洗練されたタイポグラフィ、完全な応答性とダークモードをサポートする落ち着いた/彩度の低い配色が特徴です。
ブルータリズム製品比較コンポーネント
ブッキング/予約システム用に設計されたブルータリズムスタイルの商品比較コンポーネントで、フォレスト/グリーンのカラーパレット、ハイコントラスト、珍しいレイアウトが特徴です。完全にレスポンシブで、ダークモードをサポートしています。
製品比較コンポーネント
エレガントなデザイン、洗練されたタイポグラフィ、ハイコントラストな配色を特徴とする、写真撮影機材のラグジュアリー/プレミアム製品比較コンポーネントです。レスポンシブレイアウトとダークモードのサポートが含まれています。