Neumorphic_Charity_E-commerce_Component
Il s’agit d’un composant de commerce électronique complexe et réactif conçu pour les organisations à but non lucratif/caritatives, avec un style neumorphique doux avec une palette de couleurs sépia/marron et une prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-stone-200 to-stone-300 p-4 font-sans text-stone-800 transition-colors duration-300 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 lg:p-8">
<!-- Section Title (Neumorphic) -->
<h1 class="mb-8 text-center text-4xl font-extrabold tracking-tight drop-shadow-sm md:text-5xl lg:text-6xl">
<span class="inline-block rounded-2xl bg-gradient-to-br from-stone-100 to-stone-200 px-6 py-3 shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:from-stone-50 hover:to-stone-100 dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:from-stone-700 dark:hover:to-stone-850">
Support a Cause Today
</span>
</h1>
<!-- Main Grid Layout -->
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Product Card 1 -->
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
<img src="https://picsum.photos/id/1015/400/300" alt="Education Support" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Education for All</h3>
<p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Provide essential learning materials and tuition for underprivileged children.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Goal: $10,000
</span>
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Raised: $6,500
</span>
</div>
<div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
<div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 65%;"></div>
</div>
<button class="neumorphic-button-primary w-full">
Donate Now
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
<img src="https://picsum.photos/id/10/400/300" alt="Healthcare Initiative" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Health & Wellness</h3>
<p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Support medical camps and provide essential health services to remote communities.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Goal: $15,000
</span>
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Raised: $12,800
</span>
</div>
<div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
<div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 85%;"></div>
</div>
<button class="neumorphic-button-primary w-full">
Donate Now
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
<img src="https://picsum.photos/id/1043/400/300" alt="Environmental Conservation" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Environmental Protection</h3>
<p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Fund reforestation projects and initiatives to protect endangered species.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Goal: $8,000
</span>
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Raised: $4,200
</span>
</div>
<div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
<div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 53%;"></div>
</div>
<button class="neumorphic-button-primary w-full">
Donate Now
</button>
</div>
</div>
<!-- Product Card 4 (Featured/Highlighted) -->
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-xl ring-4 ring-amber-400 ring-offset-4 ring-offset-stone-200 transition-all duration-300 ease-in-out hover:shadow-2xl dark:ring-offset-stone-900">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-amber-700 to-amber-800 shadow-inner">
<img src="https://picsum.photos/id/351/400/300" alt="Disaster Relief" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20
"></div>
<span class="absolute right-4 top-4 rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase backdrop-blur-sm">Urgent</span>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-bold text-white">Disaster Relief Fund</h3>
<p class="mb-4 text-sm text-amber-100">Provide immediate aid and long-term recovery support to communities affected by natural disasters.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-medium text-amber-100">
Goal: $20,000
</span>
<span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-bold text-amber-100">
Raised: $18,900
</span>
</div>
<div class="neumorphic-progress-bar-featured mb-4 h-2 rounded-full shadow-inner">
<div class="h-full rounded-full bg-gradient-to-r from-white to-amber-200" style="width: 94%;"></div>
</div>
<button class="neumorphic-button-alt w-full">
Contribute Now
</button>
</div>
</div>
<!-- Add more product cards as needed (using the first card's structure) -->
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
<img src="https://picsum.photos/id/1060/400/300" alt="Food Security" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Food Security Program</h3>
<p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Help end hunger by providing nutritious meals and sustainable food sources.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Goal: $12,000
</span>
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Raised: $9,100
</span>
</div>
<div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
<div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 76%;"></div>
</div>
<button class="neumorphic-button-primary w-full">
Donate Now
</button>
</div>
</div>
<div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
<div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
<img src="https://picsum.photos/id/401/400/300" alt="Community Development" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
</div>
<div class="p-6">
<h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Community Development</h3>
<p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Invest in local infrastructure and sustainable livelihood projects.</p>
<div class="mb-4 flex items-center justify-between">
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Goal: $9,500
</span>
<span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
Raised: $5,300
</span>
</div>
<div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
<div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 56%;"></div>
</div>
<button class="neumorphic-button-primary w-full">
Donate Now
</button>
</div>
</div>
</div>
<!-- Helper Classes for Neumorphism (can be defined in a CSS file or as @apply in Tailwind CSS config) -->
<style>
.neumorphic-button-primary {
@apply relative rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 px-6 py-3 font-semibold text-stone-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-stone-200 hover:to-stone-300 active:translate-y-0.5 active:scale-95 active:shadow-inner dark:from-stone-700 dark:to-stone-800 dark:text-stone-200 dark:shadow-stone-950/70 dark:hover:from-stone-600 dark:hover:to-stone-750 dark:active:shadow-stone-950/90;
}
.neumorphic-button-primary:active {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
@apply dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)];
}
.neumorphic-button-alt {
@apply relative rounded-xl bg-gradient-to-br from-white to-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-amber-50 hover:to-white active:translate-y-0.5 active:scale-95 active:shadow-inner;
}
.neumorphic-button-alt:active {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
}
.neumorphic-badge-light {
@apply inline-block rounded-full bg-gradient-to-br shadow-md;
box-shadow: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px rgba(255,255,255,0.8); /* manual neumorphic shadow for badges */
@apply dark:shadow-[2px_2px_4px_rgba(0,0,0,0.5),-2px_-2px_4px_rgba(255,255,255,0.1)];
}
.neumorphic-badge-dark {
@apply inline-block rounded-full bg-gradient-to-br shadow-md;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.15); /* manual neumorphic shadow for badges */
}
.neumorphic-progress-bar-featured {
background: linear-gradient(145deg, #cc8000, #ff9900);
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.2);
}
</style>
</div>Composants associés
Composant Composants de commerce électronique
Il s’agit d’un composant e-commerce complexe pour les sites Web de voyage/tourisme, avec des effets de néon/lueur, une palette de couleurs d’automne et une réactivité totale avec prise en charge du mode sombre.
Composants du commerce électronique
Un composant de commerce électronique de complexité modérée avec un design en mode sombre utilisant des couleurs de terre pour une présentation de portefeuille.
Composant rétro de commerce électronique
Un composant de commerce électronique complexe conçu avec un style rétro/vintage, avec une palette de couleurs triadique et un design réactif, adapté aux sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre.