JSFiddle - React, Tailwind, and code Playground

by Aides

HTML

<div id="gauge">
  <div id="sector1" class="sector">
  </div>
  <div id="sector2" class="sector">
  </div>
  <div id="sector3" class="sector">
  </div>
  <div id="sector4" class="sector">
  </div>

</div>

CSS

#gauge
{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: #dddddd;
}

#scala
{
  width: 100%;
  height: 100%;

  background: #ed0000; /* Old browsers */

  border-radius: 100%;

  background: -webkit-linear-gradient(90deg, #ed0000 0%, #ed0000 25%, #ffe928 25%, #ffe928 50%, #8ED622 50%, #8ED622 75%, #599E19 75%, #599E19 100%);
  background: -moz-linear-gradient(90deg, #ed0000 0%, #ed0000 25%, #ffe928 25%, #ffe928 50%, #8ED622 50%, #8ED622 75%, #599E19 75%, #599E19 100%);
  background: -o-linear-gradient(90deg, #ed0000 0%, #ed0000 25%, #ffe928 25%, #ffe928 50%, #8ED622 50%, #8ED622 75%, #599E19 75%, #599E19 100%);
  background: linear-gradient(90deg, #ed0000 0%, #ed0000 25%, #ffe928 25%, #ffe928 50%, #8ED622 50%, #8ED622 75%, #599E19 75%, #599E19 100%); /* FF3.6-15 */
   /* Chrome10-25,Safari5.1-6 */
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed0000', endColorstr='#ffe928',GradientType=0 ); /* IE6-9 */
}