위시리스트 컴포넌트
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 위시리스트 컴포넌트. 이미지, 제목, 가격이 있는 항목 목록을 표시하고 버튼을 제거합니다. 생생한 색상의 대시보드를 위해 설계되었습니다.
HTML 코드
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
<div class="space-y-6">
<!-- Wishlist Item 1 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 2 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
<p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 3 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
<p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
</div>
</div>관련 구성 요소
위시리스트 컴포넌트
Tailwind CSS를 사용하는 Glassmorphism 디자인 스타일의 반응형 위시리스트 구성 요소로, 젖빛 유리와 같은 효과와 임의의 자리 표시자 이미지가 있는 다크 모드를 지원합니다.
Glassmorphism 위시리스트 컴포넌트 - 농업/농업
glassmorphism 디자인 스타일, 파스텔 색 구성표, 농업/농업 웹사이트에 맞게 제작된 반응형 위시리스트 구성 요소입니다. 흐림 효과, 시맨틱 HTML 및 완전한 다크 모드를 지원하는 젖빛 유리와 같은 반투명 요소가 특징입니다.