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

製品比較コンポーネント

マテリアルデザインの原則に基づいて設計された複雑な製品比較コンポーネントで、鮮やかな配色とダークモードのサポートが特徴です。ソーシャルメディアネットワーキングインターフェースに最適です。

プレビュー

HTMLコード 

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>
</div>

関連コンポーネント

製品比較コンポーネント

Tailwind CSS を使用したマテリアルデザインでスタイル設定されたレスポンシブ製品比較コンポーネントで、グリッドベースのレイアウト、シャドウ、ダークテーマのサポートが特徴です。

開ける

製品比較コンポーネント

ダークテーマをサポートするレスポンシブ製品比較コンポーネントで、ミニマリスト/フラットなデザインとパステルカラーの配色が特徴です。この複雑なコンポーネントはダッシュボードに適しており、ユーザーは詳細な仕様とインタラクティブな要素を持つ複数の製品を比較できます。

開ける

製品比較コンポーネント

ダッシュボード用に設計された、Skeuomorphism デザイン スタイル、パステル カラー スキーム、および中程度の複雑度レベルの製品比較コンポーネント。レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが含まれています。

開ける