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>

관련 구성 요소

제품 비교 구성 요소

가을 색으로 디자인된 간단하고 재미있는 제품 비교 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 둥근 요소, 완전한 반응성 및 다크 모드 지원이 특징입니다.

열다

제품 비교 구성 요소 - 고정/개발자 스타일

모노스페이스/개발자 미학으로 설계된 복잡하고 반응이 빠른 제품 비교 구성 요소로, 자주색/보라색 색 구성표를 자랑합니다. 스포츠 및 피트니스 애플리케이션에 이상적이며, 다크 모드 지원과 여러 비교 지점을 통해 깔끔하고 터미널에서 영감을 받은 외관을 특징으로 합니다.

열다

제품 비교 구성 요소

머티리얼 디자인(Material Design) 원칙에 따라 설계된 복잡한 제품 비교 구성 요소로, 생생한 색 구성표와 다크 모드 지원을 특징으로 합니다. 소셜 미디어 네트워킹 인터페이스에 이상적입니다.

열다