CCHub Logo CCHub Tailwind Collection
구성 요소 제품 비교 제품 비교 구성 요소

제품 비교 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 제품 비교 구성 요소입니다. 비교를 위해 제품 이름, 기능 및 가격을 표시합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Product 1 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
        </ul>
        <div class="text-2xl font-bold text-center">$49/m</div>
      </div>
      
      <!-- Product 2 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Beta</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
        </ul>
        <div class="text-2xl font-bold text-center">$79/m</div>
      </div>
      
      <!-- Product 3 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
          <li>Feature F</li>
        </ul>
        <div class="text-2xl font-bold text-center">$99/m</div>
      </div>
      
    </div>
  </div>
</div>

관련 구성 요소

제품 비교 구성 요소

80년대/90년대의 레트로/빈티지 미학으로 스타일링된 반응형 제품 비교 구성 요소로, Tailwind CSS로 어두운 테마를 지원합니다.

열다

Skeuomorphic_Product_Comparison_Component

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

열다

제품 비교 구성 요소

3D와 유사한 디자인 요소, 어두운 테마 지원, picsum.photos 및 randomuser.me 를 사용하여 제품 시각화 및 사용자 아바타를 위한 자리 표시자 이미지 통합을 갖춘 반응형 제품 비교 구성 요소입니다.

열다