CCHub Logo CCHub Tailwind Collection
구성 요소 제품 비교 레트로빈티지제품비교

레트로빈티지제품비교

Dashboard를 위한 Retro/Vintage 제품 비교 구성 요소. 다크 모드를 지원하는 심플한 단색 디자인. Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

관련 구성 요소

제품 비교 구성 요소 - Cyberpunk Retro Charity

레트로/빈티지 색상 팔레트를 사용하여 사이버펑크 미학으로 디자인된 간단하고 반응이 빠른 제품 비교 구성 요소로, 비영리/자선 단체를 위해 고안되었습니다. 다크 모드 지원과 깔끔하고 미니멀한 레이아웃이 특징입니다.

열다

Skeuomorphic_Product_Comparison_Component

단색의 짙은 파란색 색 구성표를 사용하는 스큐어모픽 디자인의 간단하고 반응이 빠른 제품 비교 구성 요소로, 대시보드 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

제품 비교 구성 요소

어두운 테마를 지원하는 반응형 제품 비교 구성 요소로, 미니멀리스트/플랫 디자인과 파스텔 색상 구성표를 특징으로 합니다. 이 복잡한 구성 요소는 대시보드에 적합하므로 사용자는 자세한 사양과 대화형 요소가 있는 여러 제품을 비교할 수 있습니다.

열다