JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div id="progressbar">
      <div><div class="progresno">
      37%
      </div></div>
    </div>
    <br>
      <div id="progressbar1">
      <div></div>
    </div>

CSS

#progressbar {
      background-color: black;
      padding: 3px;
      width: 450px;
      height: 10px;
    }
    .progresno {
      text-align: center;
      font-family: 'Calibri', sans-serif;
      font-size: 10px;
      color: black;
    }
    
    #progressbar > div {
       background-color: orange;
       width: 37%; /* Adjust with JavaScript */
       height: 10px;
    }
  #progressbar1 {
      background-color: black;
      border-radius: 13px; /* (height of inner div) / 2 + padding */
      padding: 3px;
    }
    
    #progressbar1 > div {
       background-color: orange;
       width: 42%; /* Adjust with JavaScript */
       height: 20px;
       border-radius: 10px;
    }