How To Create Dynamic Donut Charts With TailwindCSS And React

CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it (~2005 – present). One such surprise came when I noticed this tweet by Shruti Balasa which demonstrated how to create a pie chart using conic-gradient().
It’s fairly straightforward. Here’s a code snippet:
div {background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);border-radius: 50%;
}
Using this tiny amount of CSS, you can create gradients that