49 lines
2.9 KiB
PHP
49 lines
2.9 KiB
PHP
<section class="max-w-[1400px] mx-auto px-6 py-16 lg:py-24">
|
|
<div class="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 class="text-3xl font-extrabold text-gray-900">Recently Created Critters</h2>
|
|
<p class="mt-3 text-gray-600">A peek at what other creators just dreamed up.</p>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div id="recent-critters-track" class="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 -mx-6 px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
|
<div class="snap-center shrink-0 w-64 sm:w-72">
|
|
<div class="rounded-3xl bg-white p-2 shadow-md ring-1 ring-gray-100">
|
|
<img src="assets/recently1.webp" alt="A recently created critter" class="w-full aspect-square rounded-2xl object-cover">
|
|
</div>
|
|
</div>
|
|
<div class="snap-center shrink-0 w-64 sm:w-72">
|
|
<div class="rounded-3xl bg-white p-2 shadow-md ring-1 ring-gray-100">
|
|
<img src="assets/recently2.webp" alt="A recently created critter" class="w-full aspect-square rounded-2xl object-cover">
|
|
</div>
|
|
</div>
|
|
<div class="snap-center shrink-0 w-64 sm:w-72">
|
|
<div class="rounded-3xl bg-white p-2 shadow-md ring-1 ring-gray-100">
|
|
<img src="assets/recently3.webp" alt="A recently created critter" class="w-full aspect-square rounded-2xl object-cover">
|
|
</div>
|
|
</div>
|
|
<div class="snap-center shrink-0 w-64 sm:w-72">
|
|
<div class="rounded-3xl bg-white p-2 shadow-md ring-1 ring-gray-100">
|
|
<img src="assets/recently4.webp" alt="A recently created critter" class="w-full aspect-square rounded-2xl object-cover">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onclick="document.getElementById('recent-critters-track').scrollBy({left: -300, behavior: 'smooth'})"
|
|
class="hidden sm:flex absolute -left-5 top-1/2 -translate-y-1/2 h-10 w-10 items-center justify-center rounded-full bg-white text-gray-700 shadow-md ring-1 ring-gray-200 hover:bg-gray-50"
|
|
aria-label="Scroll left"
|
|
>
|
|
<i data-lucide="chevron-left" class="h-5 w-5"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick="document.getElementById('recent-critters-track').scrollBy({left: 300, behavior: 'smooth'})"
|
|
class="hidden sm:flex absolute -right-5 top-1/2 -translate-y-1/2 h-10 w-10 items-center justify-center rounded-full bg-white text-gray-700 shadow-md ring-1 ring-gray-200 hover:bg-gray-50"
|
|
aria-label="Scroll right"
|
|
>
|
|
<i data-lucide="chevron-right" class="h-5 w-5"></i>
|
|
</button>
|
|
</div>
|
|
</section>
|