Компоненты Галерея продукции Компонент Галерея товаров

Компонент Галерея товаров

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

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

HTML-код

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

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

Компонент Галерея товаров

Простой адаптивный компонент галереи товаров, разработанный в соответствии с принципами Material Design, с яркими цветами и поддержкой темного режима, подходящий для панели управления. Этот компонент использует Tailwind CSS для стилизации.

Открытый

Компонент Галерея товаров

Адаптивный компонент галереи товаров с использованием Tailwind CSS со стилем дизайна Neumorphic, дополнительной цветовой схемой и сложной версткой, подходящий для бизнес-сайтов. Включает поддержку темного режима и использует изображения из picsum.photos.

Открытый

Компонент Галерея товаров

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

Открытый