JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<svg class="frame_svg" viewBox="0 0 441 619.6" preserveAspectRatio="none" style="margin-top:3vh">
  <path class="stroke_svg" d="M119,521.8v-424h85.5c62.5,0,113.8,50.6,113.8,113.8s-51,113.8-113.8,113.8l-64.5-0.1l182,196.5"/>
</svg>
<svg class="frame_svg" viewBox="0 0 441 619.6" preserveAspectRatio="none" style="margin-top:3vh">
  <polygon class="stroke_svg" points="221.4,99.7 70.4,523.7 127.4,363.7 315.8,364.9 372.4,523.7 " />
</svg>
<svg class="frame_svg" viewBox="0 0 441 619.6" preserveAspectRatio="none" style="margin-top:-6vh">
  <polygon class="stroke_svg" points="221.4,99.7 70.4,523.7 127.4,363.7 315.8,364.9 372.4,523.7 "/>
</svg>
<svg class="frame_svg" viewBox="0 0 441 619.6" preserveAspectRatio="none" style="margin-top:-6vh;margin-left:-10vw;">
  <path class="stroke_svg" d="M119,521.8v-424h85.5c62.5,0,113.8,50.6,113.8,113.8s-51,113.8-113.8,113.8l-64.5-0.1l182,196.5"/>
</svg>

CSS

body{
  margin:0;
  padding:0;
  overflow:hidden;
}
.frame_svg {
  width: 50vw; height: 50vh;
  display:inline-block;
  margin:0;
}
.frame_svg:first-child  {
  margin-right:-10vw;
}

.stroke_svg{
  fill:none;
  stroke:#333333;
  stroke-width:3vh;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  stroke-linecap:round;
}