JSFiddle - React, Tailwind, and code Playground

HTML

<section class="content">
  <div class="box gauge--1">
    <div class="mask">
      <div class="semi-circle"></div>
      <div class="semi-circle--mask"></div>
    </div>
  </div>
</section>

CSS

.content {
  display: flex;
}

.mask {
  position: relative;
  overflow: hidden;
  display: block;
  width: 12.5em;
  height: 6.25em;
  margin: 1.25em;
}

.semi-circle {
  position: relative;
  display: block;
  width: 12.5em;
  height: 6.25em;
  background: #A148F7;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.semi-circle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: block;
  width: 8.75em;
  height: 4.375em;
  margin-left: -4.375em;
  background: #E9EEF2;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.semi-circle--mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5em;
  height: 12.5em;
  background: transparent;
  transform: rotate(120deg) translate3d(0, 0, 0);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: all .3s ease-in-out;
}

.semi-circle--mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 2;
  display: block;
  width: 12.625em;
  height: 6.375em;
  margin: -1px 0 0 -1px;
  background: #DBDBDB;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.gauge--1 .semi-circle {
  background: #A148F7;
}