JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3plus.org/js/d3.js"></script>
<div class="chart-container"></div>

JavaScript

DATA = {
 children: [
     {
         "name": "Transaction failed",
         "value": 100,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Transaction failed",
         "value": 100,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
  ...