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

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

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

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

HTML-код

<div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

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

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

Визуально впечатляющий компонент корзины покупок с элементами 3D-дизайна, которые создают глубину и вовлеченность. Использует триадическую цветовую схему (основной синий, яркий красный и янтарно-желтый) для визуального интереса. Этот сложный интерфейс включает в себя списки товаров с изображениями, элементы управления количеством, сводки цен и эффекты наведения, имитирующие 3D-движение. Полностью адаптивный с поддержкой темных тем. Компонент предназначен для среды контента/блога, где читатели могут приобретать рекомендуемые продукты во время работы с контентом.

Открытый