JSFiddle - React, Tailwind, and code Playground

by Kearnan Kelly

HTML

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" class="burst">
			<defs transform="none">
				<style transform="none">
					.burst .cls-1{fill:#00c4b3;}
					.burst .cls-2{font-size:115.93px;}
					.burst .cls-2,.burst .cls-3,.burst .cls-6{fill:#fff;font-family:Calibri-Bold, Calibri;font-weight:700;}
					.burst .cls-3{font-size:536%;}.burst .cls-4{letter-spacing:-0.01em;}
					.burst .cls-5{letter-spacing:-0.08em;}
				</style>
			</defs>
			<g text-anchor="middle" transform="none">
				<g class="text-container" transform="none"><polygon class="cls-1" points="180.48 34.4 199.34 0 210.65 37.57 236.25 7.84 239.5 46.94 270.72 23.19 265.76 62.11 301.24 45.37 288.31 82.41 326.49 73.41 306.13 106.94 345.36 106.08 318.47 134.66 357.02 141.97 324.78 164.32 360.96 179.49 324.78 194.66 357.02 217.01 318.47 224.33 345.36 252.9 306.13 252.04 326.49 285.57 288.31 276.58 301.24 313.61 265.76 296.87 270.72 335.79 239.5 312.04 236.25 351.14 210.65 321.41 199.34 358.98 180.48 324.58 161.62 358.98 150.31 321.41 124.71 351.14 121.47 312.04 90.24 335.79 95.2 296.87 59.72 313.61 72.65 276.58 34.47 285.57 54.83 252.04 15.6 252.9 42.49 224.33 3.94 217.01 36.18 194.66 0 179.49 36.18 164.32 3.94 141.97 42.49 134.66 15.6 106.08 54.83 106.94 34.47 73.41 72.65 82.41 59.72 45.37 95.2 62.11 90.24 23.19 121.47 46.94 124.71 7.84 150.31 37.57 161.62 0 180.48 34.4" transform="none"></polygon>
				
					<text class="cls-6" transform="matrix(1, 0, 0, 1, 179, 252)">SAVE $500</text>
				</g>
			</g>
		</svg>

</div>

CSS

div {
  resize: both;
  overflow: auto;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  
}

svg {
  width: 100%;
  height: auto;
 
}

svg g {
  fill: blue;

}

svg g text {
  transform: translate(180px, 202px);
  font-size: 62px;

}