JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
<div class="chart" data-percent="64">
    <span class="percent"></span>
</div>

CSS

.chart {
	margin: 0 auto;
	position: relative;
	width: 70px;
	height: 70px;
	text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}
.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size: .8em;
}
.angular {
  margin-top: 100px;
}
.angular .chart {
  margin-top: 0;
}
.chart span{
	margin-top: -19px;
	font-size:18px;
	color: #2f2f2f;
	font-family: 'Roboto', 'sans-serif';
	font-weight: 700;
}
.percent:after {
	content: '%';
	margin-left: 0.1em;
	font-size: .8em;
	font-size:18px;
	color: #2f2f2f;
	font-family: 'Roboto', 'sans-serif';
	font-weight: 700;
}
.chart sup{
	font-size:18px;
	color: #2f2f2f;
	font-family: 'Roboto', 'sans-serif';
	font-weight: 700;
	
	top: 0px !important;
	left: 0px !important;
	margin-left: 1px;
}
.textP h3{
	margin-top: 22px;
	text-align:center;
	font-size:20px;
	color: #2f2f2f;
	font-family: 'Roboto', 'sans-serif';
	font-weight: 300;
}
.textP p{
	line-height: 23px;
	margin-top: 13px;
	text-align:center;
	font-size:13px;
	color: #2f2f2f;
	font-family: 'Roboto', 'sans-serif';
	font-weight: 300;
}
.bar{
	margin-top: 32px;
}

JavaScript

$('.chart').easyPieChart({
      animate: 1000,
      lineWidth: 3,
      barColor:'#2f2f2f',
      trackColor:'#dcdcdc',
      lineCap:false,
      lineWidth:'2',
      size:'72',
      scaleColor:false,
      scaleColor:false,
      animate: 2000,
      onStep: function (from, to, percent) {
       	$(this.el).find('.percent').text(Math.round(percent));
      }
    });