Компонент списка желаний - Дизайн материалов
Компонент списка желаний, вдохновленный материальным дизайном, с адаптивным дизайном и поддержкой темных тем.
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>Связанные компоненты
Компонент списка желаний
Простой компонент списка желаний электронной коммерции с микровзаимодействиями и цветовой схемой в оттенках серого, оптимизированный для адаптивного дизайна и поддержки темного режима.
Компонент списка желаний
Отзывчивый компонент списка желаний, разработанный для приборной панели, с монохромной цветовой схемой и 3D-стилем дизайна.
Компонент списка желаний
Компонент списка желаний в брутальном стиле для бизнес-сайтов, отличающийся цветовой гаммой в оттенках серого и умеренной сложностью. Адаптивный дизайн с поддержкой темного режима с использованием CSS-классов Tailwind.