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>

関連コンポーネント

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

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

開ける

Skeuomorphic_Product_Comparison_Component

ダッシュボードアプリケーションに適した、単色のダークブルーの配色を使用したスキューモーフィックデザインを備えた、シンプルでレスポンシブな製品比較コンポーネントです。ダークモードのサポートが含まれています。

開ける

製品比較コンポーネント - レトロなコーポレートスタイル

単色の青の配色を使用したレトロ/ビンテージの企業の美学を備えたレスポンシブ製品比較コンポーネント。複数のインタラクティブ要素とダークモードのサポートを備えています。デザインには、80年代/90年代にインスパイアされた幾何学模様、昔ながらのタイポグラフィ、ピクセルのようなアクセントを備えたレトロなスタイルのカードが含まれています。プロフェッショナリズムを維持しながら、ノスタルジックなデザインで目立ちたいビジネスWebサイトに最適です。

開ける