JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 1400 1000" width="1400" height="1000">
  <defs>
      <pattern id="imgpattern" x="0" y="0" width="1" height="1">
        <image width="900" height="1000"
               xlink:href="http://placekitten.com/900/1000"/>
      </pattern>
      <pattern id="imgpattern2" x="0" y="0" width="1" height="1">
        <image width="900" height="1000"
               xlink:href="http://placekitten.com/901/1000"/>
      </pattern>
  <defs>
      
  </defs>
  </defs>
  <path fill="url(#imgpattern)"
        d="M0 0 L700 0 L625 1000 L0 1000 Z" />

  <path fill="url(#imgpattern2)" 
        d="M700 0 L1400 0 L1325 1000 L625 1000 Z" />
        
</svg>

SCSS

svg {
  width: 600px;
  height: auto;
}