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

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

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

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

HTML-код

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="flex justify-between font-bold text-lg mt-5">
        <span class="text-gray-800 dark:text-white">Total:</span>
        <span class="text-gray-800 dark:text-white">$49.98</span>
    </div>
    <button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>

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

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

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

Открытый