JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	viewBox="0 0 231 154.3" xml:space="preserve">
	<polygon id="shape1" points="100,147.8 155.2,100.5 96.5,100.5 93.8,5.2 0.5,10.5 
		3.2,144.5 "/>
	<polygon id="shape2" points="167.2,97.2 102.5,97.2 102.5,5.2 225.2,0.5 230.5,153.8 
		167.2,153.8 167.2,100.5 "/>
  <defs>
  <pattern id="img1" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" width="200" height="150">
    <image id="image1" xlink:href="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" x="" y="0" width="200" height="150"/>
  </pattern>
  <pattern id="img2" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" width="320" height="240">
    <image id="image2" xlink:href="https://pixabay.com/static/uploads/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" x="0" y="0" width="320" height="240"/>
  </pattern>
</defs>  
</svg>

CSS

polygon{
		fill:none;
		stroke:#000000;
		stroke-miterlimit:10;
	}
	#shape1{
		fill:url(#img1);
	}
	#shape2{
		fill:url(#img2);
	}