JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"><g transform="translate(125, 125)"><g class="arc"><path class="slice" d="M7.041719095097281e-15,-115A115,115,0,0,1,99.59292143521046,57.49999999999998L0,0Z" fill="#73C1B1"></path></g><g class="arc"><path class="slice" d="M99.59292143521046,57.49999999999998A115,115,0,1,1,-2.112515728529184e-14,-115L0,0Z" fill="#01B5d6"></path></g><g class="label"><text style="fill: black;" transform="translate(73.61215932167728,-42.5)" dy="0.35em">foo</text><text style="fill: black;" transform="translate(-73.61215932167727,42.50000000000003)" dy="0.35em">bar</text></g><g class="label"><text style="fill: black;" transform="translate(73.61215932167728,-42.5)" dy="1.35em">33%</text><text style="fill: black;" transform="translate(-73.61215932167727,42.50000000000003)" dy="1.35em">66%</text></g></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="250"><g class="bars-chart"><g class="bars"><rect class="bar" id="5" x="120" width="80" y="30" height="66.66666666666666" fill="#01B5d6"></rect><rect class="bar" id="3" x="120" width="80" y="96.66666666666666" height="66.66666666666666" fill="#98d4e3"></rect><rect class="bar" id="2" x="120" width="80" y="163.33333333333331" height="66.66666666666669" fill="#FFBE00"></rect></g><g class="labels"><text class="label" id="5" x="160" y="68.33333333333333" style="text-anchor: middle;" fill="black">5</text><text class="label" id="3" x="160" y="135" style="text-anchor: middle;" fill="black">3</text><text class="label" id="2" x="160" y="201.66666666666666" style="text-anchor: middle;" fill="black">2</text></g></g></svg>