Компоненты Карточки товаров Компонент "Карточки товаров" с интерфейсом темного режима

Компонент "Карточки товаров" с интерфейсом темного режима

Компонент карточек товаров с пользовательским интерфейсом темного режима и отзывчивыми эффектами с использованием Tailwind CSS.

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

HTML-код

<div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Компонент Карточки Товаров

Адаптивные карточки товаров с эффектом матового стекла Glassmorphism в пастельных тонах, с поддержкой темного режима. Подходит для интерфейсов социальных сетей.

Открытый

Компонент Карточки Товаров

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

Открытый

Компонент Карточки Товаров

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

Открытый