CCHub Logo CCHub Tailwind Collection
Компоненты Сравнение продуктов Компонент сравнения продуктов

Компонент сравнения продуктов

Минималистичный/плоский дизайн, цветовая схема в оттенках серого, сложный компонент сравнения продуктов для социальных сетей с адаптивным дизайном и поддержкой темных тем.

Предварительный просмотр

HTML-код 

<div class="bg-white dark:bg-gray-900 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="lg:text-center">
      <h2 class="text-base text-gray-600 dark:text-gray-300 font-semibold tracking-wide uppercase">Compare</h2>
      <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Product Comparison</p>
    </div>

    <div class="mt-10">
      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Product 1 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product A</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/producta/600/400" alt="Product A">
              </div>
              <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product B</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productb/600/400" alt="Product B">
              </div>
               <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature A</li>
                <li>Feature B</li>
                <li>Feature C</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Product 3 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product C</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productc/600/400" alt="Product C">
              </div>
               <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature X</li>
                <li>Feature Y</li>
                <li>Feature Z</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
        <div class="sm:col-span-3">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Comparison Table</h3>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-0">
                <dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
                    <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 1 / Feature A / Feature X</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                    <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 2 / Feature B / Feature Y</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                     <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 3 / Feature C / Feature Z</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

  </div>
</div>

Связанные компоненты

Компонент сравнения продуктов - акварель/художественный

Сложный, монохроматический компонент сравнения продуктов, предназначенный для промышленного/промышленного использования, отличается мягкой, акварельной/художественной эстетикой с поддержкой темного режима. Позволяет пользователям сравнивать несколько продуктов друг с другом.

Открытый

Компонент сравнения продуктов

Игривый и веселый компонент сравнения товаров с округлыми элементами и дополнительной цветовой гаммой, подходящий для приборной панели. Особенности адаптивного дизайна и поддержки темного режима.

Открытый

Компонент сравнения продуктов - Моноширинный/Стиль Разработчика

Сложный, отзывчивый компонент сравнения продуктов, разработанный в соответствии с эстетикой монопространства/разработчика, выполненный в фиолетово-фиолетовой цветовой гамме. Он идеально подходит для занятий спортом и фитнесом, поддерживает темный режим и имеет лаконичный внешний вид, вдохновленный терминалом, с несколькими точками сравнения.

Открытый