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

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

Простой, отзывчивый компонент сравнения товаров с поддержкой темного режима с использованием 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>

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

РетроВинтажСравнение продуктов

Компонент сравнения ретро/винтажных продуктов для панели управления. Простой однотонный дизайн с поддержкой темного режима. Использует CSS Tailwind.

Открытый

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

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

Открытый

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

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

Открытый