JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-wrapper">
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="30, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>
  
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="60, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">60%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>

  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="90, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">80%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="100,...

CSS

.flex-wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  width: 80%;
}

.single-chart {
  width: 100%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 220px;
}

.circle-bg {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #2faa04;
}

.circular-chart.green .circle {
  stroke: #2faa04;
}

.circular-chart.blue .circle {
  stroke: #2faa04;
}

.percentage {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  position: relative;
}
.percentage2 {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.2em;
  position: relative;
}
@media only screen and (max-width: 960px){
.flex-wrapper {
  width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 50%;
}

@media only screen and (max-width: 768px){
.flex-wrapper {
    width: 50%;
    margin: auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 100%;
  justify-content: space-around ;
}