Компоненты Список желаний Компонент списка желаний

Компонент списка желаний

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

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

HTML-код

<div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
        <ul class="space-y-4">
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 1</h3>
                        <p class="text-sm text-gray-400">$20.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 2</h3>
                        <p class="text-sm text-gray-400">$30.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 3</h3>
                        <p class="text-sm text-gray-400">$40.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

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

Компонент списка желаний

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

Открытый

Компонент списка желаний

Компонент списка желаний со стилем 3D-дизайна, пастельной цветовой гаммой и адаптивным дизайном для бизнес-сайтов с поддержкой темного режима.

Открытый

Компонент списка желаний Баухауса

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

Открытый