JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <defs>
    <clipPath id="clip-path">
      <rect x="0" y="0" width="100" height="50"/>
      <circle cx="50" cy="50" r="39"/>
    </clipPath>
  </defs>

  <circle
    cx="50" cy="50" r="40"
    stroke="#aaa" stroke-width="2"
    fill="none"/>

  <rect
    x="20" y="5"
    width="60" height="95"
    rx="10" ry="10"
    fill="#ccc"
    clip-path="url(#clip-path)"/>
</svg>