CCHub Logo CCHub Tailwind Collection
コンポーネント 製品比較 製品比較コンポーネント

製品比較コンポーネント

Tailwind CSS でデザインされたスキューモーフィックな製品比較コンポーネントで、レスポンシブ効果とダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

関連コンポーネント

製品比較コンポーネント

glassmorphism デザイン、アース トーンの配色、およびダーク モードのサポートを備えた、シンプルで応答性の高い製品比較コンポーネントです。2枚の商品カードを大きな画面で並べて表示し、小さな画面では積み重ねて表示します。

開ける

ニューモーフィズム製品比較コンポーネント

アースカラー、ダークテーマのサポート、JavaScriptなしのNeumorphismスタイルのシンプルでレスポンシブな製品比較コンポーネント。

開ける

EarthyProduct比較

3 つの商品カードを備えた、e コマース向けのレスポンシブ商品比較コンポーネント。アースカラーの配色(ブラウン、グリーン、アンバー)と、奥行きとエンゲージメントのためのシャドウやアクセントバーなどのシンプルな3Dデザイン要素を使用して、Tailwind CSSでスタイリングされています。ダークモードのサポートが含まれており、picsum.photos のプレースホルダー画像を使用します。

開ける