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>

https://play.tailwindcss.com/A2MgIbgsEo

Hey there, thanks for this component! I tweaked it a bit for our use, adding an outer ring with red, orange and green zones to show the "valid" vs "invalid" range of the value being shown, also modifiable with a rotate angle.

So I would like to share my altered version in case it helps someone in the future :)
There:

EDIT: https://play.tailwindcss.com/HDhRoTJLM9 to try it out

    <div class="relative flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full bg-blue-400">
        <!-- Outer ring with ranges (rotate angles modifiable to get custom range) -->
        <div class="absolute top-0 aspect-square w-full rounded-full rotate-[calc(0deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-red-500 to-50% transition-transform duration-500"></div>
        <div class="absolute top-0 aspect-square w-full rounded-full rotate-[calc(45deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-orange-400 to-50% transition-transform duration-500"></div>
        <div class="absolute top-0 aspect-square w-full rounded-full rotate-[calc(60deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-green-600 to-50% transition-transform duration-500"></div>
        <div class="absolute top-0 aspect-square w-full rounded-full rotate-[calc(140deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-orange-400 to-50% transition-transform duration-500"></div>
        <div class="absolute top-0 aspect-square w-full rounded-full rotate-[calc(145deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-red-500 to-50% transition-transform duration-500"></div>
        <!-- Optional black seperation if the gauge has the same colour as the outer ring -->
        <div class="absolute top-7 flex aspect-square justify-center rounded-full bg-black" style="width: 93%;"></div>
        <!-- Actual gauge, change angle again for a dynamic value -->
        <div class="absolute top-8 flex aspect-square w-11/12 justify-center rounded-full bg-green-500"></div>
        <div class="absolute top-8 aspect-square w-11/12 rounded-full rotate-[calc(100deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-blue-100 to-50% transition-transform duration-500"></div>
        <div class="absolute top-1/3 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">60%</div>
    </div>

Thanks for sharing 👍