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

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

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

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

HTML-код

<div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

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

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

Сложный компонент сравнения продуктов, разработанный в соответствии с принципами Material Design, отличающийся яркой цветовой схемой и поддержкой темного режима. Идеально подходит для интерфейсов социальных сетей.

Открытый

Компонент сравнения товаров - ретро фирменный стиль

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

Открытый

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

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

Открытый