React: Horizontal overflow-x-scroll not working for flex container in Tailwind CSS

const { useState } = React;

const MdVerified = ({ ...props }) => <div {...props}>MdVerified</div>
const FaDiamond = ({ ...props }) => <div {...props}>FaDiamond</div>
const Dashboard = ({ ...props }) => <div {...props}>Dashboard</div>
const UserSettings = ({ ...props }) => <div {...props}>UserSettings</div>
const ShippingInformation = ({ ...props }) => <div {...props}>ShippingInformation</div>
const OrderHistory = ({ ...props }) => <div {...props}>OrderHistory</div>
const Wishlist = ({ ...props }) => <div {...props}>Wishlist</div>
const Review = ({ ...props }) => <div {...props}>Review</div>

function App() {
  const [showForm, setShowForm] = useState();
  const handleButtonClick = (id) => {
    setShowForm(id);
  };

  return (
    <div>
      <div className="mt-16">
        <div className="flex ">
          <div className="hidden md:block font-semibold "></div>
          <div className="min-w-0">
            <div className=" px-4  ">
              <img src="https://picsum.photos/1024/96" className="rounded-xl w-full " />
              <div className=" flex justify-center">
                <img
                  src="https://picsum.photos/112/112"
                  className="rounded-full w-28 -mt-16 border-[0.3rem] border-white"
                />
              </div>
              <div className="flex justify-center items-center gap-1">
                <h1 className="text-center text-2xl font-semibold">
                  Ella Solis
                </h1>
                <MdVerified className=" text-blue-500 text-2xl" />
              </div>
              <div className="flex mt-3 items-center gap-2   text-gray-700 justify-center">
                <span className="">0 WishList</span>
                <FaDiamond className="items-center text-[0.5rem] text-gray-500" />

                <span className="">0 Voucher</span>
              </div>

              <div className="mt-8 w-full">
                <div className="overflow-x-auto">
                  <div className="flex gap-16 text-xs overflow-x-scroll whitespace-nowrap md:gap-12 md:text-lg">
                    <h1
                      className={`${showForm === 'dashboard' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('dashboard')}
                    >
                      Dashboard
                    </h1>
                    <h1
                      className={`${showForm === 'userSettings' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('userSettings')}
                    >
                      Profile
                    </h1>
                    <button
                      className={`${showForm === 'shippingInformation' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('shippingInformation')}
                    >
                      Shipping Information
                    </button>
                    <button
                      className={`${showForm === 'orderHistory' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('orderHistory')}
                    >
                      Order History
                    </button>
                    <button
                      className={`${showForm === 'wishlist' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('wishlist')}
                    >
                      Wishlist
                    </button>
                    <button
                      className={`${showForm === 'review' ? 'border-b-2 border-[#0D4C90]' : ''}`}
                      onClick={() => handleButtonClick('review')}
                    >
                      Review
                    </button>
                  </div>
                </div>
              </div>

              {showForm === 'dashboard' && (
                <div>
                  <Dashboard />
                </div>
              )}
              {showForm === 'userSettings' && (
                <div>
                  <UserSettings />
                </div>
              )}
              {showForm === 'shippingInformation' && <ShippingInformation />}
              {showForm === 'orderHistory' && (
                <div>
                  <OrderHistory />
                </div>
              )}
              {showForm === 'wishlist' && (
                <div className="">
                  <Wishlist />
                </div>
              )}
              {showForm === 'review' && (
                <div className="">
                  <Review />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div id="app"></div>