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

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

Адаптивный компонент карточек товаров, выполненный в бруталистском стиле с использованием Tailwind CSS, с поддержкой темных тем и использованием изображений-заполнителей.

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

HTML-код

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 {
      background-color: #2d3748;
    }
    .text-gray-600 {
      color: #a0aec0;
    }
    .border-gray-300 {
      border-color: #4a5568;
    }
  }
</style>

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

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

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

Открытый

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

Отзывчивый компонент карточки товара с дизайном Glassmorphism, цветовой схемой в оттенках серого и поддержкой темной темы. Он включает в себя множество интерактивных элементов, подходящих для интерфейсов социальных сетей, таких как изображение продукта, название, описание, цена и кнопка добавления в корзину. В дизайне используются полупрозрачные элементы, похожие на стекло Froster, с эффектами размытия. Не используется Javascript, только HTML с CSS-классами Tailwind.

Открытый

Скевоморфная карточка товара

Скевоморфный компонент Карточка товара для дашборда, стилизованный под оттенки серого, средней сложности, адаптивный с темным режимом.

Открытый