Компоненты Корзину Компонент корзины покупок

Компонент корзины покупок

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

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

HTML-код

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

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

Нейроморфная корзина для покупок

Компонент тележки Neumorphic с использованием триадической цветовой схемы. Имеет умеренную сложность, предназначен для деловых/корпоративных сайтов. Компонент является отзывчивым и включает поддержку темного режима с использованием префикса dark: от Tailwind. Включает заполнители для товаров с указанием количества и цены, промежуточный итог и кнопку оформления заказа. Использует picsum.photos для изображений товаров.

Открытый

Memphis_Industrial_Shopping_Cart_Component

Простой, отзывчивый компонент корзины покупок с влиянием Memphis Design, адаптированный для промышленного и производственного контекстов, с монохромной палитрой с одним ярким акцентным цветом и поддержкой темного режима.

Открытый

Компонент корзины покупок

Компонент корзины покупок с 3D-дизайном, земляными тонами и сложными интерактивными элементами. Он разработан для блога/контентного веб-сайта с адаптивным дизайном и поддержкой темных тем, используя Tailwind CSS.

Открытый