JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="summury-text multi-line">
  <span class="left-text">SPEED</span>
  <div class="multi-line-item">
    <span class="right-text meter">
      <span style="width:60%">
        <span class="progress info"></span>
      </span>
      <span class="meter-text">UP 257,008 byte</span>
    </span>
    <div class="devider"></div>
    <span class="right-text meter">
      <span style="width:80%">
        <span class="progress warning"></span>
      </span>
      <span class="meter-text">DOWN 10,024,600 byte</span>
    </span>
  </div>
</div>

CSS

.summury-text{width:500px;margin:0 auto;}
.devider{height:10px;}
.summury-text span{display:table-cell;}
.summury-text.multi-line{height:90px;}
.summury-text.multi-line .left-text{line-height:90px;}
.summury-text .multi-line-item{display:table-cell;height:40px;}
.summury-text .left-text{width:150px;background-color:#005fff;color:#fff;display:table-cell;line-height:40px;text-align:center; vertical-align:top;}
.summury-text .right-text{width:350px;}
.summury-text .right-text.meter{text-align:left;height: 40px;line-height:40px; position: relative;background: #f3efe6;overflow: hidden;}
.summury-text .right-text.meter span {display: block;height: 100%;}
.summury-text .right-text.meter span.meter-text{text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;}
.progress {    
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
    text-align:left;
}

.progress.danger {background-color:#dc3545}
.progress.success {background-color:#28a745}
.progress.info {background-color:#17a2b8}
.progress.primary {background-color:#007bff}
.progress.warning {background-color:#ffc107}


@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}