Компонент списка желаний - Дизайн материалов
Компонент списка желаний, вдохновленный материальным дизайном, с адаптивным дизайном и поддержкой темных тем.
HTML-код
<div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
<div class='text-center space-y-2 sm:text-left'>
<div class='space-y-0.5'>
<p class='text-lg text-black font-semibold dark:text-white'>
Product Name
</p>
<p class='text-gray-500 font-medium dark:text-gray-300'>
$19.99
</p>
</div>
<button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
Remove
</button>
</div>
<img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>Связанные компоненты
Компонент списка желаний
Простой, адаптивный компонент списка желаний для бизнес/корпоративных сайтов с микровзаимодействиями. Имеет аналогичную цветовую схему (сине-зелено-бирюзовый), поддержку темных тем и тонкую анимацию наведения. Компонент отображает элементы списка желаний с изображениями товаров, названиями, ценами и кнопками действий.
Компонент списка желаний
Отзывчивый компонент Wishlist, стилизованный под эстетику ретро/винтажного дизайна, с использованием монохроматической цветовой схемы для целей электронной коммерции.
Компонент списка желаний стекломорфизма
Простой, отзывчивый компонент списка желаний в стиле glassmorphism для музыкальных/аудиоплатформ, включающий полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия и фирменной синей цветовой схемой, с поддержкой темного режима.