JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<h4 class="progress-title">ZORNET HTML</h4>
      <div class="progress pink">
        <div class="progress-bar" style="width:90%; background:#d01d4c;">
          <div class="progress-value">90%</div>
        </div>
      </div>

      <h4 class="progress-title">САЙТ ZORNET ФАЙЛОВ</h4>
      <div class="progress green">
        <div class="progress-bar" style="width:60%; background:#248075;">
          <div class="progress-value">60%</div>
        </div>
      </div>

      <h4 class="progress-title">ПОРТАЛ ZORNET JQUERY</h4>
      <div class="progress yellow">
        <div class="progress-bar" style="width:55%; background:#faa916;">
          <div class="progress-value">55%</div>
        </div>
      </div>

CSS

.progress-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 20px;
}

.progress {
  height: 3px;
  background: #8e44ad;
  border-radius: 0;
  margin-bottom: 30px;
  overflow: visible;
  box-shadow: none;
  position: relative;
}

.progress .progress-bar {
  height: 8px;
  position: relative;
  top: -3px;
  box-shadow: none;
  animation: animate-positive 2s;
}

.progress .progress-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  position: absolute;
  top: -30px;
  right: 5px;
}

.progress.pink {
  background: #d01d4c;
}

.progress.green {
  background: #248075;
}

.progress.yellow {
  background: #faa916;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}