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="skill-items">

            <!-- Skill chart item -->
            <div class="skill-chart-container">
                <div class="skill-chart">
                  <span class="chart" data-percent="80">

                      <div class="percent-container">
                          <span class="percent-number"></span>
                          <span class="percent-sign">%</span>
                      </div>
                  </span>
                </div>
                <span class="experience-title">Skill 1</span>
            </div>

            <!-- Skill chart item -->
            <div class="skill-chart-container">
                <div class="skill-chart">
                  <span class="chart" data-percent="70">

                      <div class="percent-container">
                          <span class="percent-number"></span>
                          <span class="percent-sign">%</span>
                      </div>
                  </span>
                </div>
                <span class="experience-title">Skill 2</span>
            </div>

            <!-- Skill chart item -->
            <div class="skill-chart-container">
                <div class="skill-chart">
                  <span class="chart" data-percent="60">

                      <div class="percent-container">
                          <span class="percent-number"></span>
                          <span class="percent-sign">%</span>
                      </div>
                  </span>
                </div>
                <span class="experience-title">Skill 3</span>
            </div>

            <!-- Skill chart item -->
            <div class="skill-chart-container">
                <div class="skill-chart">
                  <span class="chart" data-percent="90">

                      <div class="percent-container">
                          <span...

CSS

.skill-items{
  text-align: center;
}
.skill-chart-container{
  width: calc(25% - 30px);
  float: left;
  padding: 15px;
}

.skill-chart-container{
    margin-bottom: 55px;
}

.percent-container{
    color: #333;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: 300;
    padding-left: 5px;
    position: relative;
    top: 110px;
}

.percent-sign{
    font-size: 16px;
    margin-left: -6px;
}

.experience-title{
    color: #333;
    display: inline-table;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin-top: 30px;
}

JavaScript

$(document).ready(function(e) {
    $('.chart').easyPieChart({
        easing: 'easeInOutCirc',
        animate:{ duration: 3000, enabled: true },
        onStep: function(from, to, percent) {
            $(this.el).find('.percent-number').text(Math.round(percent));
        },
        barColor: "#07cafa",
        lineWidth:8,
        lineCap:'butt',
        scaleLength:20,
        size:'166',
        scaleColor:false,
         trackColor:'rgba(255,255,255,0)'
    });
});