製品比較コンポーネント
ミニマリスト/フラットデザイン、グレースケールの配色、レスポンシブデザインとダークテーマのサポートを備えたソーシャルメディア用の複雑な製品比較コンポーネント。
HTMLコード
<div class="bg-white dark:bg-gray-900 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-gray-600 dark:text-gray-300 font-semibold tracking-wide uppercase">Compare</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Product Comparison</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Product 1 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product A</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/producta/600/400" alt="Product A">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product B</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productb/600/400" alt="Product B">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product C</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productc/600/400" alt="Product C">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
<div class="sm:col-span-3">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Comparison Table</h3>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 1 / Feature A / Feature X</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 2 / Feature B / Feature Y</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 3 / Feature C / Feature Z</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
製品比較コンポーネント
ダークテーマをサポートするレスポンシブ製品比較コンポーネントで、ミニマリスト/フラットなデザインとパステルカラーの配色が特徴です。この複雑なコンポーネントはダッシュボードに適しており、ユーザーは詳細な仕様とインタラクティブな要素を持つ複数の製品を比較できます。
製品比較コンポーネント - レトロなコーポレートスタイル
単色の青の配色を使用したレトロ/ビンテージの企業の美学を備えたレスポンシブ製品比較コンポーネント。複数のインタラクティブ要素とダークモードのサポートを備えています。デザインには、80年代/90年代にインスパイアされた幾何学模様、昔ながらのタイポグラフィ、ピクセルのようなアクセントを備えたレトロなスタイルのカードが含まれています。プロフェッショナリズムを維持しながら、ノスタルジックなデザインで目立ちたいビジネスWebサイトに最適です。