JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <clipPath id="cliRoundCorners">
    <rect rx="20" ry="20" width="80" height="80" fill="red" />
  </clipPath>
  <g transform="translate(0,0)" width="100" height="100" clip-path="url(#cliRoundCorners)">
       <rect y="0" width="80" height="80" fill="green"/>   
       <text x="50" y="50" text-anchor="middle" class="value">hi mom</text>
   </g>
  <g  transform="translate(0,100)" width="100" height="100" clip-path="url(#cliRoundCorners)">
       <rect y="0" width="80" height="80" fill="#DDDDFF"/>   
       <circle cy="40" cx="40" r="30" fill="yellow"/>   
       <text x="40" y="40" text-anchor="middle" class="value">hello world</text>
   </g>
</svg>