JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.js"></script>
<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'>
	<div class='chart circular-bar-chart circular-bar-container' data-percent='45'>
		<label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label>
    </div>
</div>

CSS

.circular-bar {
    	margin-bottom: 25px;
    }
    
    .circular-bar .circular-bar-chart {
    	position: relative;
    }
    
    .circular-bar strong {
    	display: block;
    	font-weight: 600;
    	font-size: 18px;
    	line-height: 30px;
    	position: absolute;
    	top: 35%;
    	width: 80%;
    	left: 10%;
    	text-align: center;
    }
    
    .circular-bar label {
    	display: block;
    	font-weight: 100;
    	font-size: 17px;
    	line-height: 20px;
    	position: absolute;
    	top: 50%;
    	width: 80%;
    	left: 10%;
    	text-align: center;
    }

JavaScript

$('.circular-bar-chart').easyPieChart({
            barColor: "#2baab1",
            delay: 300,
            size: 45,
            lineWidth: 4,
            trackColor: '#f2f2f2',
            scaleColor: false,
            scaleLength: 5,
            rotate: 0,
            animate: 1600,
            onStart: $.noop,
            onStop: $.noop
        });