tailwind gauge chart

tailwind-gauge-chart.html

<!-- percent to deg => Math.round(((value / 100) * 180 - 45) * 10) / 10 -->

<div class="relative flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full bg-blue-400">
  <div class="absolute top-0 aspect-square w-full rotate-[calc(72deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-white to-50% transition-transform duration-500"></div>
  <div class="absolute top-1/4 flex aspect-square w-3/4 justify-center rounded-full bg-blue-100"></div>
  <div class="absolute bottom-0 w-full truncate text-center text-[20vmax] leading-none">40%</div>
</div>

I come up with this, just a stacked of half circle divs. I Achieved similar solution to @MajeedAB, maybe better.
But actually sometimes there's an extra small pixel visible.

https://play.tailwindcss.com/H4o6E6s6Qf

<div class="relative m-8 flex aspect-[2/1] items-center overflow-hidden">
  <!-- outer ring -->
  <div class="absolute h-full w-full rounded-t-full bg-green-500"></div>
  <div class="absolute h-full w-full origin-[50%_100%] rotate-[110deg] rounded-t-full bg-yellow-300"></div>
  <div class="absolute h-full w-full origin-[50%_100%] rotate-[150deg] rounded-t-full bg-red-500"></div>
  <!-- actual gauge -->
  <div class="absolute bottom-0 left-1/2 flex h-[90%] w-[90%] -translate-x-1/2 items-end justify-center rounded-t-full bg-green-100 text-center text-8xl"></div>
  <div class="absolute bottom-0 left-1/2 flex h-[90%] w-[90%] origin-[50%_100%] -translate-x-1/2 -rotate-[60deg] items-end justify-center rounded-t-full bg-blue-600 text-center text-8xl"></div>
  <div class="absolute bottom-0 left-1/2 flex h-[75%] w-[75%] -translate-x-1/2 items-end justify-center rounded-t-full bg-green-100 text-center text-8xl font-semibold">40%</div>
</div>

Your snippet have the extra small pixel visible too, but I managed to modified it. (https://play.tailwindcss.com/8zzqB4iASh)

Apparently, I just need to nested it and with a bit modification it can become like this

https://play.tailwindcss.com/bIWB9GkMtB

<div class="relative flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full">
  <!-- outer ring -->
  <div class="absolute aspect-square top-0 w-full rotate-[calc(100deg-45deg)] bg-gradient-to-tr from-green-400 from-50% to-transparent to-50% transition-transform duration-500"></div>
  <div class="absolute aspect-square top-0 w-full rotate-[calc(100deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-yellow-400 to-50% transition-transform duration-500"></div>
  <div class="absolute aspect-square top-0 w-full rotate-[calc(140deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-red-400 to-50% transition-transform duration-500"></div>
  
  <!-- actual gauge -->
  <div class="absolute inset-8 flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full border-4 border-b-0 border-slate-600">
    <div class="absolute aspect-square top-0 w-full rotate-[calc(72deg-45deg)] bg-gradient-to-tr from-blue-400 from-50% to-transparent to-50% transition-transform duration-500"></div>
    <div class="absolute aspect-square top-0 w-full rotate-[calc(72deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-blue-100 to-50% transition-transform duration-500"></div>
    <div class="absolute top-1/4 flex aspect-square w-3/4 justify-center rounded-full bg-blue-100"></div>
    <div class="absolute bottom-0 w-full truncate text-center text-8xl leading-none">40%</div>
  </div>
</div>

And for separation we just need to control the border.

@aryomuzakki Thanks for sharing! 🙏
Nice solution! 🤟

Just adding on to the collection:

https://play.tailwindcss.com/r1kkaAO6Gn

<!-- percent to deg => Math.round(((value / 100) * 180 - 45) * 10) / 10 -->
<!-- Or just place your percentage in the calc in line 13 -->

<div class="relative flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full">
  <!-- outer ring -->
  <div class="absolute top-0 aspect-square w-full rotate-[calc(120deg-30deg)] bg-gradient-to-tr from-red-400 from-30% to-transparent to-50% transition-transform duration-500"></div>
  <div class="absolute top-0 aspect-square w-full rotate-[calc(120deg-90deg)] bg-gradient-to-tr from-transparent from-30% to-yellow-400 to-50% transition-transform duration-500"></div>
  <div class="absolute top-0 aspect-square w-full rotate-[calc(120deg-30deg)] bg-gradient-to-tr from-transparent from-30% to-green-400 to-50% transition-transform duration-500"></div>

  <!-- actual gauge -->
  <div class="absolute inset-8 flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full border-[12px] border-b-0">
    <div class="absolute top-0 aspect-square w-full rotate-[calc(45deg-45deg)] bg-gradient-to-tr from-slate-100 from-20% to-transparent to-80% transition-transform duration-500"></div>
    <div class="absolute top-0 aspect-square w-full rotate-[calc(0.5*180deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-slate-100 to-50% transition-transform duration-500"></div>
    <div class="absolute top-[15%] flex aspect-square w-[85%] justify-center rounded-full bg-blue-100"></div>
    <div class="absolute top-[55%] w-full text-center text-9xl font-bold uppercase leading-none tracking-wide text-slate-600">50%</div>
  </div>
</div>