JSFiddle - React, Tailwind, and code Playground

HTML

<button class="exit" type="button" aria-label="Close">
    <svg class="exitsvg" width="100%" height="100%" viewBox="-144 -144 288 288">
        <g id="exit">
            <title>exit</title>
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
        </g>
    </svg>
</button>

CSS

.exit {
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
}

.exitHover:hover  {
  fill: green;
}