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>