JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="vertical-center-container">
      <div class="horizontal-center-container bugfix">
        <div class="gradient"></div>
        <div class="needle"></div>
      </div>
      <svg style="position: absolute;">
        <clipPath id="gauge-clip-path" clipPathUnits="objectBoundingBox">
          <path transform="scale(0.8333333333333334, 1.1219041831485448)" d="M 0.1380602337443566,0.7913417161825449 A 0.5,0.5 0 1 1 1.0619397662556433,0.7913417161825449 L 0.9695518130045147,0.7530733729460359 A 0.4,0.4 0 1 0 0.23044818699548525,0.7530733729460359 Z"></path>
        </clipPath>
      </svg>
    </div>
  </div>

CSS

.bugfix {  
  /* transform: scale(1); */
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  padding: 8px;
  height: 100%;
}

.vertical-center-container {
  width: 100%;
  overflow: hidden;
}

.horizontal-center-container {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1.2 / 0.891342;
  margin: 0px auto;
}

.gradient {
  width: 100%;
  height: 100%;
  background: conic-gradient(from -1.9635rad at 50% 56.0952%, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 204, 0) 3.92699rad, rgb(255, 0, 0));
  clip-path: url(#gauge-clip-path);
  opacity: 1;
}

.needle {
  background-color: white;
  width: 8px;
  height: 61.7047%;
  border: 2px solid black;
  border-radius: 4px;
  position: absolute;
  bottom: 32.6857%;
  left: 50%;
  transform-origin: left bottom;
  margin: 0px auto;
  display: block;
  transform: scaleZ(1) rotate(-1.05791rad) translateX(-4px) translateY(4px);
}