All Prompts
All Prompts
coursepricing-cardmodule-listctatailwindanimatedresponsiveeducationgridintersection-observer
Animated Course Overview Section with Pricing & Modules
Анимированный блок обзора курса на Tailwind. Демонстрирует цены, модули и CTA. Адаптивный дизайн с плавными анимациями входа. Идеально для образовательных платформ.
Prompt
<section class="sm:px-8 mt-20 mb-20" id="course">
<div class="sm:py-28 max-w-7xl mr-auto ml-auto pt-20 pb-20">
<div class="sm:p-8 sm:py-8 bg-neutral-100/50 border-neutral-200/50 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
<!-- Header -->
<div class="text-center transition-all duration-700 ease-out" data-animate="">
<span class="inline-flex items-center ring-1 ring-neutral-200 text-sm font-medium text-neutral-600 font-geist bg-white rounded-full pt-1 pr-3 pb-1 pl-3">Training Program</span>
<h2 class="sm:text-5xl lg:text-6xl text-4xl font-normal text-neutral-900 tracking-tighter font-geist mt-4">
Master impactful giving and volunteering</h2>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 mt-10 items-start">
<!-- Left: Program Card -->
<div class="lg:col-span-5 transition-all duration-700 ease-out delay-150" data-animate="">
<div class="bg-white rounded-[28px] ring-1 ring-black/5 overflow-hidden shadow-lg">
<!-- Program header -->
<div class="bg-blue-600 p-6 sm:p-8">
<p class="text-white/90 text-sm font-geist">Training Program</p>
<p class="mt-2 text-white text-5xl sm:text-6xl font-semibold tracking-tight font-geist">Free</p>
<p class="mt-2 text-white/80 text-sm font-geist">For all active Sense members</p>
</div>
<!-- Program details -->
<div class="p-5 sm:p-6">
<div class="sm:p-5 bg-neutral-100/50 ring-black/5 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
<h3 class="text-neutral-900 font-semibold tracking-tight font-geist">Impact Training: Maximizing Your
Charitable Contribution</h3>
<p class="text-neutral-700 text-sm mt-2 font-geist">Learn evidence-based approaches to philanthropy and
volunteering that create lasting positive change in communities.</p>
<div class="mt-3 flex items-center gap-3">
<div class="flex -space-x-2">
<img class="ring-2 ring-white w-7 h-7 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e36aef18-f0f2-42d8-bcc3-86e5433f18f9_320w.jpg" alt="Participant 1">
<img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/79e0a89c-b04e-4a65-b214-cc33e9601ecb_320w.jpg" alt="Participant 2">
<img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/075e4814-03ac-46d1-bfeb-bb23651c0d08_320w.jpg" alt="Participant 3">
</div>
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs text-neutral-700 ring-1 ring-black/10 font-geist">
500+ enrolled
</span>
</div>
</div>
<!-- What's included -->
<div class="mt-6">
<p class="text-xs uppercase tracking-wider text-neutral-500 font-medium font-geist">What's included</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2"
class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
30 hours comprehensive training
</li>
<li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2"
class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
Mentorship from experts
</li>
<li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2"
class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
Community network access
</li>
<li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2"
class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
Impact certification
</li>
</ul>
</div>
</div>
<!-- CTA -->
<div class="pr-5 pb-5 pl-5">
<a href="#enroll"
class="inline-flex items-center justify-center hover:bg-neutral-800 transition text-sm font-medium text-white font-geist bg-neutral-900 w-full h-12 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Join Training Program
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Center: Divider -->
<div class="lg:col-span-1 flex items-center justify-center transition-all duration-700 ease-out delay-300"
data-animate="">
<div
class="h-full w-px bg-gradient-to-b from-transparent via-neutral-300 to-transparent min-h-96 hidden lg:block">
</div>
<div class="w-full h-px bg-gradient-to-r from-transparent via-neutral-300 to-transparent lg:hidden"></div>
</div>
<!-- Right: Modules -->
<div class="lg:col-span-6 space-y-4">
<!-- Module 1 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[450ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 1: Understanding Global Impact</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">4 hours, 2 case studies, 5 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<!-- Divider -->
<div class="flex items-center px-5 transition-all duration-700 ease-out delay-[500ms]" data-animate="">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
</div>
<!-- Module 2 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[550ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 2: Strategic Philanthropy</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">5 hours, 3 projects, 4 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<!-- Divider -->
<div class="flex items-center px-5 transition-all duration-700 ease-out delay-[600ms]" data-animate="">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
</div>
<!-- Module 3 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[650ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 3: Community Engagement</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">6 hours, 2 fieldwork, 6 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<!-- Divider -->
<div class="flex items-center px-5 transition-all duration-700 ease-out delay-[700ms]" data-animate="">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
</div>
<!-- Module 4 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[750ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 4: Measuring Social Impact</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">4 hours, 1 capstone, 3 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<!-- Divider -->
<div class="flex items-center px-5 transition-all duration-700 ease-out delay-[800ms]" data-animate="">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
</div>
<!-- Module 5 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[850ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 5: Volunteer Leadership</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">5 hours, 2 workshops, 4 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<!-- Divider -->
<div class="flex items-center px-5 transition-all duration-700 ease-out delay-[900ms]" data-animate="">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
</div>
<!-- Module 6 -->
<button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[950ms]" data-animate="">
<div class="min-w-0">
<p class="text-neutral-900 font-medium tracking-tight font-geist">Module 6: Building Sustainable Change</p>
<p class="text-neutral-600 text-sm mt-1 font-geist">6 hours, 1 capstone, 5 resources</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const targetEl = document.getElementById('course');
if (!targetEl) return;
const animateElements = targetEl.querySelectorAll('[data-animate]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateElements.forEach(element => {
// Remove animation start states to trigger the transition
element.classList.remove('opacity-0', 'translate-y-8', 'blur-md');
});
// Stop observing once the animation has been triggered
observer.unobserve(targetEl);
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is visible
});
observer.observe(targetEl);
});
</script>
</section>