위시리스트 컴포넌트
다크 모드용으로 설계된 반응형 위시리스트 구성 요소로, 비즈니스/기업 웹사이트에 적합합니다. 인터랙티브 요소와 Tailwind CSS를 사용하여 구축된 보색 구성표가 특징입니다.
HTML 코드
<div class="min-h-screen bg-gray-900 text-white p-5">
<h1 class="text-2xl font-bold mb-5">Wishlist</h1>
<div class="overflow-x-auto">
<table class="min-w-full bg-gray-800 rounded-lg shadow-lg">
<thead>
<tr class="bg-gray-700 text-gray-200">
<th class="py-2 px-4">Item</th>
<th class="py-2 px-4">Description</th>
<th class="py-2 px-4">Price</th>
<th class="py-2 px-4">Actions</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3">
Item 1
</td>
<td class="py-4 px-4">This is a description of item 1.</td>
<td class="py-4 px-4">$19.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3">
Item 2
</td>
<td class="py-4 px-4">This is a description of item 2.</td>
<td class="py-4 px-4">$29.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3">
Item 3
</td>
<td class="py-4 px-4">This is a description of item 3.</td>
<td class="py-4 px-4">$39.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-5 flex justify-between">
<button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button>
<button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button>
</div>
</div>관련 구성 요소
Glassmorphism 위시리스트 컴포넌트 - 농업/농업
glassmorphism 디자인 스타일, 파스텔 색 구성표, 농업/농업 웹사이트에 맞게 제작된 반응형 위시리스트 구성 요소입니다. 흐림 효과, 시맨틱 HTML 및 완전한 다크 모드를 지원하는 젖빛 유리와 같은 반투명 요소가 특징입니다.