JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 550">
  <rect width="500" height="550"/>
  <polygon points="206.7 75 120.1 25 33.49 75 33.49 175 120.1 225 206.7 175 206.7 75" style="fill:red"/>
  <polygon points="293.3 25 206.7 75 206.7 175 293.3 225 379.9 175 379.9 75 293.3 25"/>
  <polygon points="293.3 25 206.7 75 206.7 175 293.3 225 379.9 175 379.9 75 293.3 25" style="fill:#ff0"/>
  <polygon points="206.7 375 120.1 325 33.49 375 33.49 475 120.1 525 206.7 475 206.7 375" style="fill:blue"/>
  <polygon points="293.3 325 206.7 375 206.7 475 293.3 525 379.9 475 379.9 375 293.3 325" style="fill:#f0f"/>
  <polygon points="293.3 225 206.7 175 120.1 225 120.1 325 206.7 375 293.3 325 293.3 225" style="fill:lime"/>
  <polygon points="379.9 175 293.3 225 293.3 325 379.9 375 466.51 325 466.51 225 379.9 175" style="fill:aqua"/>
</svg>

CSS

BODY {
  margin: 0;
  padding: 0;
}

POLYGON {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  /* transform-origin: center; */
}

POLYGON:hover {
  transform: scale(1.5);
}