Компонент списка желаний
Адаптивный компонент списка желаний, разработанный в темном режиме с использованием Tailwind CSS. Он имеет макет карточки для элементов с изображениями, описаниями и аватарами пользователей, поддерживает темную тему и адаптивные эффекты.
HTML-код
<div class="min-h-screen bg-gray-900 flex items-center justify-center">
<div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
<div>
<h3 class="text-xl text-white">Item Title 1</h3>
<p class="text-gray-400">Short description of the item goes here.</p>
</div>
</div>
<div class="flex items-center bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
<div>
<h3 class="text-xl text-white">Item Title 2</h3>
<p class="text-gray-400">Short description of the item goes here.</p>
</div>
</div>
<div class="flex items-center bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
<div>
<h3 class="text-xl text-white">Item Title 3</h3>
<p class="text-gray-400">Short description of the item goes here.</p>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент списка желаний
Упрощенный компонент списка желаний, стилизованный под бруталистский подход с использованием цветовой схемы в оттенках серого, предназначенный для демонстрации работ или продуктов.
Компонент списка желаний
Адаптивный компонент списка желаний со стилем дизайна Glassmorphism с использованием Tailwind CSS, поддерживающий темный режим с эффектами матового стекла и случайными изображениями-заполнителями.
Компонент списка желаний
Компонент списка желаний со стилем 3D-дизайна, пастельной цветовой гаммой и адаптивным дизайном для бизнес-сайтов с поддержкой темного режима.