Composant de comparaison de produits - Cyberpunk Retro Charity
Un composant simple et réactif de comparaison de produits conçu avec une esthétique cyberpunk utilisant une palette de couleurs rétro/vintage, destiné aux organisations à but non lucratif/caritatives. Dispose d’une prise en charge du mode sombre et d’une mise en page propre et minimaliste.
HTML Code
<div class="bg-gray-200 dark:bg-gray-900 font-sans p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
Choose Your Impact
</h2>
<div class="flex flex-col lg:flex-row justify-center items-stretch gap-6">
<!-- Left Product/Option -->
<div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-fuchsia-500 dark:border-fuchsia-700 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-300/10 via-fuchsia-500/10 to-transparent pointer-events-none rounded-lg"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400 mb-4 tracking-wider uppercase">Basic Support</h3>
<img src="https://picsum.photos/seed/charity1/300/200" alt="Basic Support" class="w-full h-40 object-cover rounded-md mb-4 border border-fuchsia-400/50">
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Provide essential resources like a warm meal and a blanket for someone in need.
Every small contribution makes a significant difference in their daily lives.
</p>
<ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Warm Meal</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Comfort Blanket</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Hygiene Kit</li>
</ul>
<p class="text-center text-3xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 mb-6">$15 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
<button class="w-full py-3 px-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
<span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Select Basic Support</span>
</button>
</div>
</div>
<!-- Right Product/Option -->
<div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-teal-500 dark:border-teal-700 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-300/10 via-teal-500/10 to-transparent pointer-events-none rounded-lg"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-teal-600 dark:text-teal-400 mb-4 tracking-wider uppercase">Enhanced Impact</h3>
<img src="https://picsum.photos/seed/charity2/300/200" alt="Enhanced Impact" class="w-full h-40 object-cover rounded-md mb-4 border border-teal-400/50">
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Contribute to long-term solutions, vocational training, and safe shelter programs.
Empower individuals to rebuild their lives and achieve self-sufficiency.
</p>
<ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Vocational Training</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Safe Shelter Access</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Mentorship Programs</li>
</ul>
<p class="text-center text-3xl font-extrabold text-teal-700 dark:text-teal-300 mb-6">$45 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
<button class="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
<span class="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Select Enhanced Impact</span>
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de comparaison de produits
Un composant de comparaison de produits avec le style de conception Skeuomorphism, la palette de couleurs pastel et le niveau de complexité modéré, conçu pour les tableaux de bord. Il comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de comparaison de produits
Un composant de comparaison de produits avec un style de design brutaliste, avec des couleurs vives et une complexité modérée pour présenter des produits ou travailler dans un portefeuille.
EarthyComparaison des produits
Un composant réactif de comparaison de produits pour le commerce électronique, avec trois fiches produits. Stylisé avec Tailwind CSS en utilisant une palette de couleurs de terre (bruns, verts, ambres) et des éléments de conception 3D simples comme des ombres et des barres d’accentuation pour plus de profondeur et d’engagement. Inclut la prise en charge du mode sombre et utilise des images de remplacement de picsum.photos.