JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 674 371" style="enable-background:new 0 0 674 371;" xml:space="preserve">
<polygon class="st0" points="214,49 214,54 669,54 669,183 0,183 0,187 0,188 0,314 0,319 20,319 20,314 5,314 5,188 669,188 
	674,188 674,183 674,54 674,49 "/>
<g>
	<rect x="19.4" y="0.2" class="st1" width="200" height="113"/>
</g>
<g>
	<text transform="matrix(1 0 0 1 82.6778 51.5475)" class="st2 st3 st4">End</text>
</g>
<g>
	<rect x="234" class="st1" width="200" height="113"/>
</g>
<g>
	<rect x="449" class="st1" width="200" height="113"/>
</g>
<g>
	<rect x="19" y="129" class="st1" width="200" height="113"/>
</g>
<g>
	<rect x="20" y="258" class="st1" width="200" height="113"/>
</g>
<g>

</g>
<g>

</g>
<g>
	<rect x="234" y="258" class="st8" width="200" height="113"/>
</g>
<g>
	<rect x="234" y="129" class="st1" width="200" height="113"/>
</g>
<g>
</g>
<g>
	<rect x="449" y="129" class="st1" width="200" height="113"/>
</g>
<g>
</g>
<g>
	<text transform="matrix(1 0 0 1 297.5755 309.5475)" class="st2 st3 st4">start</text>
</g>
<polygon class="st5" points="234,333 216,321 234,309 "/>
<polygon class="st5" points="215,333 197,321 215,309 "/>
</svg>

CSS

.st0{fill:#AFD2E0;}
	.st1{fill:#D1DCE0;}
	.st2{fill:#526167;}
	.st3{font-family:'Lato-Bold';}
	.st4{font-size:20px;}
	.st5{fill:#D1005D;}
	.st6{font-family:'Lato-Regular';}
	.st7{font-size:17px;}
	.st8{fill:#FFFFFF;}