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

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

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

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

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

Простой, отзывчивый компонент сравнения товаров в стиле Neumorphism с земляными тонами, поддержкой темных тем и отсутствием JavaScript.

Открытый

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

Адаптивный компонент сравнения товаров с 3D-подобными элементами дизайна, поддержкой темных тем и интеграцией изображений-заполнителей для визуализации товаров и аватаров пользователей с помощью picsum.photos и randomuser.me.

Открытый

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

Адаптивный компонент сравнения товаров, стилизованный под Material Design с использованием Tailwind CSS, с макетами на основе сетки, тенями и поддержкой темных тем.

Открытый