製品比較コンポーネント
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>関連コンポーネント
製品比較コンポーネント
ミニマリスト/フラットデザイン、アースカラーの配色、およびTailwind CSSを使用したダッシュボード用の適度な複雑さを備えた製品比較コンポーネント。このコンポーネントはレスポンシブで、ダークテーマをサポートしています。JavaScript はありません。