JSFiddle - React, Tailwind, and code Playground

HTML

<div class="speed-gauge">
    <div class="mark"></div>
  </div>

CSS

.speed-gauge {
  width: 216px;
  height: 216px;
  padding: 20px;
  border-radius: 100%;
  background:
    radial-gradient(#ffff 0 0) content-box,
    conic-gradient(
      from -90deg,
      red 36deg,
      orange 72deg,
      yellow 108deg,
      green 144deg,
      blue 180deg,
      #0000 0
    );
  position: relative;
}
.mark {
  --size: 37px;
  --score: 5;
  --max: 5;
  width: var(--size);
  height: var(--size);
  background-color: white;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0px;
  bottom: 50%;
  border-radius: 50%;
  /* transform-origin: 108px 20px; Point de rotation pour faire le demi-cercle */

  /* transform: rotate(180deg); */
}