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>

Thanks for sharing 👍