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

製品比較コンポーネント

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

プレビュー

HTMLコード 

<div class="container mx-auto p-4">
  <div class="flex flex-col lg:flex-row gap-4">
    
    <!-- Product 1 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
      <img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

    <!-- Product 2 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature A</li>
        <li>Feature B</li>
        <li>Feature C</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

  </div>
</div>

関連コンポーネント

製品比較コンポーネント

メンフィスデザインの美学を備えたシンプルでレスポンシブな製品比較コンポーネントで、レトロ/ビンテージカラーパレットを使用しています。CRM/ビジネスツール用に設計されており、ダークモードをサポートし、2つの製品の主要な機能を表示します。

開ける

製品比較コンポーネント - 水彩/アーティスティック

工業/製造用に設計された複雑な単色の製品比較コンポーネントで、ダークモードをサポートするソフトな水彩画/芸術的な美学が特徴です。ユーザーは複数の製品を並べて比較できます。

開ける

製品比較コンポーネント - オーガニック/自然にインスパイアされた秋の色

有機的/自然にインスパイアされたデザインで、秋の色を使用した複雑で応答性の高い製品比較コンポーネント。スポーツやフィットネスのアプリケーションに適しており、ダークモードを完全にサポートしています。

開ける