위시리스트 컴포넌트
비영리/자선 단체를 위해 설계된 깔끔하고 신뢰할 수 있는 위시리스트 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.
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>관련 구성 요소
위시리스트 컴포넌트
다크 모드용으로 설계된 반응형 위시리스트 구성 요소로, 비즈니스/기업 웹사이트에 적합합니다. 인터랙티브 요소와 Tailwind CSS를 사용하여 구축된 보색 구성표가 특징입니다.
Glassmorphism 위시리스트 컴포넌트 - 농업/농업
glassmorphism 디자인 스타일, 파스텔 색 구성표, 농업/농업 웹사이트에 맞게 제작된 반응형 위시리스트 구성 요소입니다. 흐림 효과, 시맨틱 HTML 및 완전한 다크 모드를 지원하는 젖빛 유리와 같은 반투명 요소가 특징입니다.
Wishlist_Component
스포츠/피트니스 애플리케이션을 위한 반응형이고 예술적인 위시리스트 구성 요소로, 포레스트 그린 색상 팔레트, 부드럽고 페인팅된 질감 및 다크 모드 지원을 특징으로 합니다.