Im building a project with nextJS and Tailwind CSS.
Now iI want to create a grid section with div elements and I want those Elements to have the same gradient applied as its border so there is a smooth look and a general Theme scrolling down. The Solution I thought of was to have one parent gradient that has a background that only clips to the content divs and not in between (so in between the Elements (the gap) is transparent and shows the real background). Unfortunately I haven't found a solution that made this work. Following is my Code with a pciture on how it looks right now.

{/*Grid Trust*/}
  <section
    className="relative z-10 py-32 w-full max-w-screen-xl px-5 xl:px-0"
  >
    {/* Grid Container */}
    <div
      className="relative grid grid-cols-5 grid-rows-3 gap-5 justify-items-center bg-gradient-to-b from-gray-200 to-gray-600"
    >
      {/* Child Divs */}
      <div className="col-span-2 row-span-2 border-2 border-transparent rounded-xl p-5 h-96 w-full bg-white">
      </div>
      <div className="col-span-2 row-span-1 border-2 border-transparent rounded-xl p-5 h-full w-full bg-white">
      </div>
      <div className="col-span-2 row-span-1 row-start-2 col-start-3 border-2 border-transparent rounded-xl p-5 h-full w-full bg-white">
      </div>
      <div className="col-span-1 row-span-2 border-2 border-transparent rounded-xl p-5 h-full w-full bg-white">
      </div>
      <div className="col-span-3 row-span-1 border-2 border-transparent rounded-xl p-5 h-full w-full bg-white">
      </div>
      <div className="col-span-2 row-span-1 border-2 border-transparent rounded-xl p-5 h-full w-full bg-white">
      </div>
    </div>
  </section>