위시리스트 컴포넌트
브루탈리즘 접근 방식으로 스타일링된 단순한 위시리스트 구성 요소로, 작업이나 제품을 선보이기 위해 설계된 그레이스케일 색 구성표를 사용합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
</ul>
</div>