CodePen Embed - Tailwind CSS v3 Scroll Snap

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex w-screen h-screen place-items-center justify-center">
  <div class="max-w-md">
    <div class="w-full flex gap-12 snap-x overflow-x-auto py-14">
      <div class="snap-start shrink-0 first:pl-6">
        <img src="https://images.pexels.com/photos/3470481/pexels-photo-3470481.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
      </div>
      <div class="snap-start shrink-0 first:pl-6">
        <img src="https://images.pexels.com/photos/3470872/pexels-photo-3470872.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
      </div>
      <div class="snap-start shrink-0 first:pl-6">
        <img src="https://images.pexels.com/photos/995939/pexels-photo-995939.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
      </div>
    </div>
  </div>
</div>

Run Pen

This Pen is owned by Felix Icaza on CodePen.

See more by @felixicaza on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.