CodePen Embed - TailwindCSS Scroll Snap X-axis

<div class="snap-x mx-auto snap-mandatory h-screen flex w-96 overflow-scroll">
    <div class="snap-start bg-amber-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">1</div>
    <div class="snap-start bg-teal-200 w-96 flex-shrink-0  h-screen flex items-center justify-center text-8xl">2</div>
    <div class="snap-start bg-cyan-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">3</div>
    <div class="snap-start bg-fuchsia-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">4</div>
</div>

This Pen is owned by Devdojo on CodePen.

See more by @devdojo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdn-tailwindcss.vercel.app