위시리스트 컴포넌트
레트로/빈티지 미학으로 디자인된 반응형 위시리스트 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 하여 작업이나 제품을 전시하는 데 이상적입니다.
HTML 코드
<div class="bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-200 p-6 rounded-lg max-w-md mx-auto shadow-lg">
<h2 class="text-3xl font-bold text-center mb-4">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=1" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=2" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="mt-6 text-center">
<h4 class="text-2xl font-bold">User: John Doe</h4>
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mt-2">
</div>
</div>관련 구성 요소
위시리스트 컴포넌트
비즈니스 웹사이트를 위한 브루탈리즘 스타일의 위시리스트 구성 요소로, 회색조 색 구성표와 적당한 복잡성을 특징으로 합니다. Tailwind CSS 클래스를 사용하여 다크 모드를 지원하는 반응형 디자인입니다.
위시리스트 컴포넌트
뉴모피즘(Neumorphism) 스타일의 소셜 미디어를 위한 위시리스트 컴포넌트로, 보색이 돋보입니다. 여기에는 다크 모드를 지원하는 Tailwind CSS를 사용하는 반응형 디자인이 포함되어 있습니다. HTML 및 Tailwind 클래스만 사용되며 JavaScript는 사용되지 않습니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.