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

제품 비교 구성 요소

둥근 요소와 보색 구성표가 있는 장난스럽고 쾌활한 제품 비교 구성 요소로, 대시보드에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

미리 보기

HTML 코드 

<div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product 1 Card -->
    <div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
      
      <ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Super Speedy Performance</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Unlimited Whimsical Widgets</li>
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> No Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Friendly Support Sprites</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
          Choose Alpha!
        </button>
      </div>
    </div>

    <!-- Product 2 Card -->
    <div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
      

      <ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> Standard Speed</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Dazzling Gimmicks Included</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Exclusive Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Mythical Support Beings</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
          Select Beta!
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

제품 비교 구성 요소 - 부동산 (종이/인쇄에서 영감을 얻음)

부동산 목록을 위한 종이/인쇄에서 영감을 받은 간단한 제품 비교 구성 요소로, 두 개의 부동산이 있습니다. 보라색/보라색 톤을 사용하며 다크 모드를 지원합니다.

열다

제품 비교 구성 요소

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

열다

Skeuomorphic_Product_Comparison_Component

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

열다