JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350">
  <title>ring btn</title>
  <rect class="btn tap area" id="one" width="350" height="350"/>
  <g class="ring container">
    <path class="ring a" d="M119.139,129.639a10.5,10.5,0,0,1-7.425-17.924,89.5,89.5,0,0,1,126.571,0,10.5,10.5,0,0,1-14.849,14.85,68.5,68.5,0,0,0-96.873,0A10.468,10.468,0,0,1,119.139,129.639Z"/>
    <path class="ring b" d="M104.29,114.79a10.5,10.5,0,0,1-7.425-17.924,110.5,110.5,0,0,1,156.269,0,10.5,10.5,0,1,1-14.849,14.85,89.5,89.5,0,0,0-126.57,0A10.468,10.468,0,0,1,104.29,114.79Z"/>
    <path class="ring c" d="M89.44,99.94a10.5,10.5,0,0,1-7.424-17.925,131.5,131.5,0,0,1,185.967,0,10.5,10.5,0,1,1-14.849,14.85,110.5,110.5,0,0,0-156.27,0A10.468,10.468,0,0,1,89.44,99.94Z"/>
    <path class="ring d" d="M74.591,85.091a10.5,10.5,0,0,1-7.425-17.925,152.5,152.5,0,0,1,215.667,0,10.5,10.5,0,1,1-14.849,14.85,131.5,131.5,0,0,0-185.968,0A10.468,10.468,0,0,1,74.591,85.091Z"/>
  </g>
</svg>

CSS

.ring {
        transform-origin: 175px 175px;
      }

      .ring.a {
        fill: #f2ca30;
      }
      .ring.b {
        fill: #31bc06;
      }
      .ring.c {
        fill: #11a0ad;
        }
      .ring.d {
        fill: #028d9e;
      }

      .btn.tap.area {
        z-index: 100;
        fill: transparent;
      }
      .btn.tap.area:hover + .ring.container .ring {
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      .btn.tap.area:hover + .ring.container .ring.a,
      .btn.tap.area:hover + .ring.container .ring.c {
        animation-name: clockwise;
      }
      .btn.tap.area:hover + .ring.container .ring.b,
      .btn.tap.area:hover + .ring.container .ring.d {
        animation-name: counter-clockwise;
      }

      .btn.tap.area:hover + .ring.container .ring.a {
        animation-duration: 1.33s;
      }
      .btn.tap.area:hover + .ring.container .ring.b {
        animation-duration: 1s;
      }
      .btn.tap.area:hover + .ring.container .ring.c {
        animation-duration: .67s;
      }
      .btn.tap.area:hover + .ring.container .ring.d {
        animation-duration: .33s;
      }

      @keyframes clockwise {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes counter-clockwise {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-360deg);
        }
      }