<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<section class="flex min-h-screen items-center bg-slate-900 p-6">
  <div class="container mx-auto space-y-6">
    <h2 class="text-3xl font-semibold text-white">Our Features</h2>
    <ul class="flex snap-x snap-mandatory gap-x-6 overflow-x-auto pb-6">
      <li class="w-2/3 flex-shrink-0 snap-center">
        <div class="space-y-6 rounded-lg border border-white/30 p-6">
          <div class="flex items-center gap-x-5">
            <div class="h-12 w-12 rounded-full bg-gray-300"></div>
            <h3 class="text-xl font-medium text-white">Feature #1</h3>
          </div>
          <div class="space-y-1">
            <div class="h-4 w-10/12 bg-white/30"></div>
            <div class="h-4 w-7/12 bg-white/30"></div>
            <div class="h-4 w-8/12 bg-white/30"></div>
          <!-- </div> -->
        </div>
      </li>
      <li class="w-2/3 flex-shrink-0 snap-center">
        <div class="space-y-6 rounded-lg border border-white/30 p-6">
          <div class="flex items-center gap-x-5">
            <div class="h-12 w-12 rounded-full bg-gray-300"></div>
            <h3 class="text-xl font-medium text-white">Feature #2</h3>
          </div>
          <div class="space-y-1">
            <div class="h-4 w-10/12 bg-white/30"></div>
            <div class="h-4 w-7/12 bg-white/30"></div>
            <div class="h-4 w-8/12 bg-white/30"></div>
          </div>
        </div>
      </li>
      <li class="w-2/3 flex-shrink-0 snap-center">
        <div class="space-y-6 rounded-lg border border-white/30 p-6">
          <div class="flex items-center gap-x-5">
            <div class="h-12 w-12 rounded-full bg-gray-300"></div>
            <h3 class="text-xl font-medium text-white">Feature #3</h3>
          </div>
          <div class="space-y-1">
            <div class="h-4 w-10/12 bg-white/30"></div>
            <div class="h-4 w-7/12 bg-white/30"></div>
            <div class="h-4 w-8/12 bg-white/30"></div>
          </div>
        </div>
      </li>
      <li class="w-2/3 flex-shrink-0 snap-center">
        <div class="space-y-6 rounded-lg border border-white/30 p-6">
          <div class="flex items-center gap-x-5">
            <div class="h-12 w-12 rounded-full bg-gray-300"></div>
            <h3 class="text-xl font-medium text-white">Feature #4</h3>
          </div>
          <div class="space-y-1">
            <div class="h-4 w-10/12 bg-white/30"></div>
            <div class="h-4 w-7/12 bg-white/30"></div>
            <div class="h-4 w-8/12 bg-white/30"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.