위시리스트 컴포넌트
비영리/자선 단체를 위해 설계된 깔끔하고 신뢰할 수 있는 위시리스트 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.
HTML 코드
<div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-blue-700 dark:text-blue-400">
Your Impact Wishlist
</h1>
<p class="text-center text-lg mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed text-gray-600 dark:text-gray-300">
Every item on this wishlist represents a tangible way you can make a difference. Choose what resonates most with you.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/1025/400/250" alt="Community Garden" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support a Community Garden</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Provide tools, seeds, and irrigation for a sustainable community garden that feeds local families and teaches valuable skills.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $500</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$310 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 62%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/237/400/250" alt="School Supplies" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Back-to-School Kits for Children</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Fund essential school supplies, backpacks, and learning materials for underprivileged students, setting them up for success.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $750</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$150 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 20%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/292/400/250" alt="Medical Aid" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Essential Medical Supplies</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Provide vital medicines, bandages, and hygiene kits to communities lacking access to basic healthcare.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $1200</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$900 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/1015/400/250" alt="Clean Water Access" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Access to Clean Drinking Water</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Fund the drilling of new wells and water purification systems, bringing safe hydration to remote villages.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $2000</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$1000 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 50%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/1074/400/250" alt="Animal Shelter Support" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support for Animal Shelters</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Help provide food, veterinary care, and comfortable habitats for rescued animals awaiting adoption.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $600</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$420 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 70%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
<img src="https://picsum.photos/id/1084/400/250" alt="Elderly Care" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-6 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Warm Meals for Seniors</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
Provide nutritious, hot meals and friendly visits to elderly individuals who are homebound or facing food insecurity.
</p>
<div class="flex items-center justify-between text-base mb-4">
<span class="font-medium text-green-700 dark:text-green-400">Goal: $900</span>
<span class="text-yellow-600 dark:text-yellow-400 font-bold">$540 Raised</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
</div>
<div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
Contribute Now
</button>
</div>
</div>
</div>
<div class="text-center mt-12 sm:mt-16">
<a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-500 dark:hover:bg-green-600">
Explore More Ways to Help
</a>
</div>
</div>
</div>관련 구성 요소
위시리스트 컴포넌트
데이트 또는 소셜 연결 플랫폼에 적합한 간단하고 반응이 빠른 위시리스트 구성 요소로, 기업용 블루 톤과 다크 모드를 지원하는 3D 디자인 미학을 특징으로 합니다.
위시리스트 컴포넌트
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 위시리스트 컴포넌트. 이미지, 제목, 가격이 있는 항목 목록을 표시하고 버튼을 제거합니다. 생생한 색상의 대시보드를 위해 설계되었습니다.