Загрузка...
Адаптивная секция календаря предстоящих событий. Отображает карточки событий с датой, местом, изображением и кнопками. Идеально для лендингов и календарей.
<section class="relative sm:py-16 pt-12 pb-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div class="">
<p class="text-xs text-neutral-300">Explore Our Calendar</p>
<h4 class="text-2xl sm:text-3xl tracking-tight font-semibold">Upcoming Events</h4>
</div>
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-white/10 hover:bg-white/20 px-4 py-2 text-xs font-medium transition" style="">
<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="mail" class="lucide lucide-mail h-4 w-4 text-slate-300" style=""><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
Subscribe for updates
</a>
</div>
<div class="mt-6 grid gap-4">
<!-- Event 1 -->
<article class="rounded-2xl bg-white/[0.04] border border-white/10 p-4 flex items-center justify-between" style="">
<div class="flex items-center gap-4">
<div class="w-14 text-center">
<p class="text-xs text-white/60" style="">Oct 15</p>
<p class="text-sm font-semibold tracking-tight">Sunday</p>
</div>
<div class="">
<p class="text-xs text-white/60 flex items-center gap-2" style="">
<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="map-pin" class="lucide lucide-map-pin h-4 w-4 text-slate-300" style=""><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
Monaco Harbor
</p>
<p class="mt-1 text-sm font-medium">Monaco Yacht Show VIP Experience</p>
</div>
</div>
<button class="h-9 w-9 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center" style="">
<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 h-5 w-5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</article>
<!-- Event 2 - Featured -->
<article class="rounded-2xl overflow-hidden bg-white/[0.04] border border-white/10" style="">
<div class="grid md:grid-cols-[1.5fr_1fr]">
<div class="flex pt-4 pr-4 pb-4 pl-4 items-start justify-between">
<div class="flex items-center gap-4">
<div class="w-14 text-center">
<p class="text-xs text-white/60" style="">Oct 28</p>
<p class="text-sm font-semibold tracking-tight">Saturday</p>
</div>
<div class="">
<p class="text-xs text-white/60 flex items-center gap-2" style="">
<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="waves" class="lucide lucide-waves h-4 w-4 text-slate-300" style=""><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
Mediterranean Route
</p>
<p class="mt-1 text-sm font-medium">Sunset Gala: Mediterranean Luxury Cruise</p>
</div>
</div>
<button class="h-9 w-9 rounded-lg bg-cyan-400/90 hover:bg-cyan-400 text-black flex items-center justify-center" style="">
<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="external-link" class="lucide lucide-external-link h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="M10 14 21 3" class=""></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path></svg>
</button>
</div>
<div class="relative">
<img src="https://cdn.midjourney.com/29f602d4-815a-4b1f-973e-025cc28d51dc/0_0.png?w=800&q=80" alt="Luxury yacht at sunset on calm waters" class="h-40 md:h-full w-full object-cover" style="">
<div class="absolute inset-0 md:bg-gradient-to-t bg-gradient-to-l from-[#0b1220]/60 via-transparent to-transparent"></div>
</div>
</div>
</article>
<!-- Event 3 -->
<article class="rounded-2xl bg-white/[0.04] border border-white/10 p-4 flex items-center justify-between" style="">
<div class="flex items-center gap-4">
<div class="w-14 text-center">
<p class="text-xs text-white/60" style="">Nov 12</p>
<p class="text-sm font-semibold tracking-tight">Sunday</p>
</div>
<div class="">
<p class="text-xs text-white/60 flex items-center gap-2" style="">
<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="palm-tree" class="lucide lucide-palm-tree h-4 w-4 text-slate-300" style=""><path d="M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4m-4 6a6.5 6.5 0 0 1 7 6" class=""></path><path d="M17.5 3c2.5 0 4.5 2.24 4.5 5h-2l-1-1-1 1h-4" class=""></path><path d="M10 14a6.5 6.5 0 0 0-7 6" class=""></path><path d="m3 14 8-8 8 8" class=""></path><path d="m21 15-2-2-2 2" class=""></path></svg>
</p>
<p class="mt-1 text-sm font-medium">Caribbean Island Hopping Adventure</p>
</div>
</div>
<button class="h-9 w-9 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center" style="">
<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 h-5 w-5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</article>
</div>
</div>
</section>