위시리스트 컴포넌트
레트로/빈티지 디자인, 흙색 색 구성표 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 위시리스트 구성 요소로 블로그 또는 콘텐츠 사이트에 적합합니다.
HTML 코드
<div class="font-sans antialiased bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300 p-4 sm:p-6 md:p-8">
<div class="max-w-6xl mx-auto bg-amber-50 rounded-lg shadow-xl overflow-hidden dark:bg-stone-800 border border-stone-300 dark:border-stone-700 relative">
<!-- Retro TV Bezel Effect -->
<div class="absolute inset-0 border-[1.5rem] border-solid border-stone-400 dark:border-stone-950 rounded-lg pointer-events-none z-10 flex items-center justify-center">
<div class="absolute inset-0 border-stone-600 dark:border-stone-700 border-[0.5rem] rounded-lg"></div>
<span class="absolute top-2 left-2 text-sm text-stone-700 dark:text-stone-300 font-mono">VOL</span>
<span class="absolute top-2 right-2 text-sm text-stone-700 dark:text-stone-300 font-mono">CH</span>
<div class="absolute bottom-4 right-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
<div class="absolute bottom-4 left-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
<div class="absolute top-6 right-6 w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
</div>
<div class="relative z-20 p-4 sm:p-6 lg:p-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-orange-800 dark:text-orange-400 mb-6 font-serif">Your Wishlist</h2>
<p class="text-center text-sm mb-8 text-stone-700 dark:text-stone-300 font-mono">Saved items for later enjoyment.</p>
<!-- Sort and Filter Controls -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-8 bg-stone-200/50 dark:bg-stone-700/50 rounded-md p-3 sm:p-4 border border-stone-300 dark:border-stone-600">
<div class="w-full sm:w-auto mb-4 sm:mb-0">
<label for="sort-by" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Sort By:</span></label>
<select id="sort-by" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
<option>Date Added (Newest)</option>
<option>Date Added (Oldest)</option>
<option>Price (Low to High)</option>
<option>Price (High to Low)</option>
<option>Alphabetical (A-Z)</option>
</select>
</div>
<div class="w-full sm:w-auto">
<label for="filter-category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Filter By Category:</span></label>
<select id="filter-category" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
<option>All</option>
<option>Books</option>
<option>Gadgets</option>
<option>Home Decor</option>
<option>Fashion</option>
</select>
</div>
</div>
<!-- Wishlist Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Old Camera">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Vintage Film Camera</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A rare beauty from the 70s, perfect for collectors.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$299.99</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/104/400/300" alt="Old Typewriter">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Antique Typewriter</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Functional and beautiful, a piece of literary history.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$189.00</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 (Out of Stock) -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col opacity-70">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/338/400/300" alt="Record Player">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Classic Vinyl Player</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Spin your favorite tunes on this retro-style player.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-gray-700 dark:text-gray-400">$120.50</span>
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Out of Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 cursor-not-allowed">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button disabled class="px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-md shadow-md cursor-not-allowed dark:bg-gray-600">
Out of Stock
</button>
</div>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/37/400/300" alt="Old Book">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">First Edition Novel</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A must-read classic in pristine condition.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$45.00</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Call to Action / Explore More -->
<div class="text-center mt-10">
<p class="text-stone-700 dark:text-stone-300 mb-4 font-mono">Looking for more vintage finds?</p>
<button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Explore Catalog
<svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- User Profile Thumbnail -->
<div class="absolute top-6 left-6 flex items-center bg-brown-600 dark:bg-brown-800 text-amber-50 rounded-full px-4 py-2 shadow-lg hidden md:flex font-mono">
<img class="w-8 h-8 rounded-full mr-2 border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<span class="text-sm">User's List</span>
</div>
</div>
</div>
</div>관련 구성 요소
위시리스트 컴포넌트
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 위시리스트 컴포넌트. 이미지, 제목, 가격이 있는 항목 목록을 표시하고 버튼을 제거합니다. 생생한 색상의 대시보드를 위해 설계되었습니다.
사이버펑크 위시리스트 구성 요소
암호화폐/블록체인 애플리케이션을 위한 복잡한 사이버펑크 테마의 위시리스트 구성 요소로, 어두운 배경, 네온 주얼 톤 액센트, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.
레트로위시리스트컴포넌트
레트로/빈티지 미학, 가을 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 위시리스트 구성 요소로 문서 또는 기술 자료 사이트에 적합합니다.