JSFiddle - React, Tailwind, and code Playground

HTML

<section class="products">
  <div class="products__inner">
    <div class="products__row">

      <div class="products__item">
        <div class="products__item-content">
          <div class="products__item-title">Lorem ipsum dolor sit amet</div>
          <div class="products__item-background">
            <svg class="products__item-svg">
              <clipPath id="clip-bg-1" clipPathUnits="objectBoundingBox">
                <path d="M1,.9773V.4154C.717.3872.6819.2481.3358.2481A.789.789,0,0,0,0,.3126V.9773A.0227.0227,0,0,0,.0227,1H.9773A.0227.0227,0,0,0,1,.9773Z"/>
              </clipPath>
              <image
               xlink:href="https://source.unsplash.com/_yL3CxNwV4M/500x500"
               width="100%" height="100%"
               preserveAspectRatio="xMidYMid slice"
               clip-path="url(#clip-bg-1)"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="products__item">
        <div class="products__item-content">
          <div class="products__item-title">Lorem ipsum dolor sit amet</div>
          <div class="products__item-background">
            <svg class="products__item-svg">
              <clipPath id="clip-bg-2" clipPathUnits="objectBoundingBox">
                <path d="M1,.3039A.7924.7924,0,0,0,.6853.2481C.3308.2481.3026.3941,0,.4173V1H1Z"/>
              </clipPath>
              <image
               xlink:href="https://source.unsplash.com/3lovxIcj6y8/500x500"
               width="100%" height="100%"
               preserveAspectRatio="xMidYMid slice"
               clip-path="url(#clip-bg-2)"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="products__item">
        <div class="products__item-content">
          <div class="products__item-title">Lorem ipsum dolor sit amet</div>
          <div class="products__item-background">
            <svg class="products__item-svg">
              <clipPath id="clip-bg-3" clipPathUnits="objectBoundingBox">
               ...

CSS

html {
  height: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 100px;
  height: 100%;
  background: linear-gradient(to bottom right, #6A5CA3, #EA9DE6) no-repeat;
  box-sizing: border-box;
}

.products {
  padding: 0 20px 10px;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='339' height='250'%3E%3Cpath d='M211.5,211.29c67.81,0,81.37,24.28,127.5,34V34.76c-46.13-9.7-59.69-34-127.5-34C126.75.79,126.75,38.7,42,38.7A202.28,202.28,0,0,1,0,34.76V245.27a202.28,202.28,0,0,0,42,3.94C126.75,249.21,126.75,211.29,211.5,211.29Z' fill='%23eab8e9'/%3E%3Cpath d='M4.12,237.79,0,241.87V226.06a7,7,0,0,1,3.82,1.83A7,7,0,0,1,4.12,237.79ZM0,34.76v2.35a7,7,0,0,0,3.68-1.62C2.43,35.26,1.21,35,0,34.76ZM307.45,147.54A11,11,0,0,0,323,163.09l16-16V116Zm.07-81.64a11,11,0,0,0-.07,15.59L339,113V81.86L323.11,66A11,11,0,0,0,307.52,65.9ZM339,37.11V34.76c-2.83-.59-5.55-1.24-8.15-1.93l2.32,2.31a7,7,0,0,0,4.94,2A6.54,6.54,0,0,0,339,37.11Zm0,189a7,7,0,0,0-5.78,1.83l0,0-12.42,12.42a158.37,158.37,0,0,0,15.42,4.38l2.82-2.8ZM0,147.11l17-17,33.06,33a11,11,0,0,0,15.56-15.55l-33-33,33-33.06A11,11,0,0,0,50.1,65.93h0l-33,33L0,81.86V113l1.46,1.46L0,116ZM293.92,18.79l-6.56,6.54a7,7,0,0,0,9.91,9.9l0,0,10.43-10.4C303,22.79,298.47,20.79,293.92,18.79Zm-43.9,162a18,18,0,0,0,0-25.46l-53-53,53-53a18,18,0,0,0-25.46-25.45l-53,53L134.86,40.24l-16.4-16.38c-.1-.11-.22-.2-.33-.3A178,178,0,0,1,88,33.88a17.94,17.94,0,0,0,5,15.43l41.84,41.85L146,102.33l-11.16,11.18L93,155.36c-.4.36-.78.74-1.15,1.14a18,18,0,0,0,26.59,24.29l16.4-16.36,36.67-36.64,53,53A18,18,0,0,0,250,180.77ZM131.51,228.13l3.35-1.47a184,184,0,0,1,27.75-9.82L176.45,203a7,7,0,1,0-9.59-10.2,2.13,2.13,0,0,0-.3.3v0l-18,18-13.69-13.77-4.24-4.23a7,7,0,1,0-9.9,9.9l14.14,14.13,3.83,3.83-3.83,3.81Zm157.11-1.26h0c4.64,2,9.16,4.08,13.78,6.11l-5.13-5.13A7,7,0,0,0,288.62,226.87Z' fill='%23fff' opacity='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat:...