Neumorphic_Charity_E-commerce_Component
非営利団体/慈善団体向けに設計された複雑で応答性の高い電子商取引コンポーネントで、セピア/ブラウンの配色とダークモードのサポートを備えたソフトなニューモルフィックスタイルが特徴です。
HTMLコード
<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>