JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<div class="gauge">
    <div class="ring"></div>
    <div class="label">test</div>
</div>

CSS

.gauge {
    width:80px;
    height:80px;
}
.ring {
    z-index:1;
    --angle: 80deg;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #279b37 0deg var(--angle),
    #DDD var(--angle) 360deg
  );
  mask: radial-gradient(
    circle at center,
    transparent 30px,
    black 30px,
    black 40px,
    transparent 40px
  );
}
.gauge .label {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    width:80px;
    height:80px;
    text-align:center;
}