Noob issue: can't achieve a simple flex gallery using StaticImage

[renaudcerrato]

Trying to get my hands on Gatsby to create my own landing pages (disclaimer: I'm a mobile dev with 10+ years of experience of native Android - but definitely NOT a web developer). I'm familiar with JS, TS, React but still learning CSS - please be gentle !

I'm trying to achieve a really simple (static) horizontal gallery like I did on my codepen:

I've tried to port the (trivial) codepen above to Gatsby using StaticImage (and tailwind css) but I'm definitely struggling to achieve the same results for hours:

I've tried to play with various available options with no luck - looking at the generated source there's a lot of wrappers around...

Here's the source (gatsby-test.zip):

const IndexPage: React.FC<PageProps> = () => {
  const imgclass = "h-full w-auto"

  return (
    <main>
      <div className="flex overflow-x-auto h-[50dvh] gap-4">
        <StaticImage
          src="https://placehold.co/1600x1400/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/400x200/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/480x700/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/500x300/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/450x700/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/450x800/png"
          className={imgclass}
          alt=""
        />
        <StaticImage
          src="https://placehold.co/850x300/png"
          className={imgclass}
          alt=""
        />
      </div>
    </main>
  );
};

What am I missing?