Composant de la liste de souhaits
Un composant de liste de souhaits propre et fiable conçu pour les organisations à but non lucratif/caritatives, doté d’une palette de couleurs triadique et d’une réactivité totale avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste et réactif avec un thème arc-en-ciel dégradé multicolore, adapté aux sites d’actualités ou de journalisme. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif pour les sites Web d’entreprise/d’entreprise avec des micro-interactions. Dispose d’un schéma de couleurs analogue (bleu-vert-sarcelle), d’une prise en charge du thème sombre et de subtiles animations de survol. Le composant affiche les éléments de la liste de souhaits avec des images de produits, des noms, des prix et des boutons d’action.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif adapté aux plateformes de rencontres ou de connexion sociale, doté d’une esthétique de design 3D avec des tons bleus d’entreprise et une prise en charge du mode sombre.