javascript – Tailwind CSS scroll snap x is just not working, have tried a variety of time

Tailwind CSS scroll snap x is just not working, have tried a variety of time.

I am unsure if it’s a bug right here, are you able to assist me discover it?

Right here is my code:

        <div class="snap-mandatory snap-x">
          <div class="mx-auto md:max-w-2xl flex justify-center bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
            <div class="md:flex">
              <div class="md:shrink-0">
                <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://recordsdata.catbox.moe/whnmix.png" alt="Fashionable constructing structure"></img>
              </div>
              <div class="p-8">
                <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Take a look at</div>
                <p class="mt-2 text-white">Take a look at<a category="underline decoration-pink-500">Take a look at</a>。</p>
              </div>
            </div>
          </div>

          <div class="mx-auto md:max-w-2xl flex justify-center bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
            <div class="md:flex">
              <div class="md:shrink-0">
                <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://recordsdata.catbox.moe/whnmix.png" alt="Fashionable constructing structure"></img>
              </div>
              <div class="p-8">
                <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Take a look at</div>
                <p class="mt-2 text-white">Take a look at<a category="underline decoration-pink-500">Take a look at</a>。</p>
              </div>
            </div>
          </div>
        </div>

The impact of the code now could be that the 2 parts are aligned vertically, with no scrolling.

I would like the playing cards to be parallel and scrollable.