JSFiddle - React, Tailwind, and code Playground

HTML

<svg >
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="70" r="50" clip-path="url(#cut-off-bottom)" />
</svg>

CSS

svg{-webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}