JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<body style="background:#d5d5d5;">  
      <div class="header"><h4 style="text-align: center;color: white;margin: 0px;padding: 6px;">Heading of Website</h4></div>
<!-- class="bg-cust-gray" -->
        <div class="container">
             <h4 style="margin-top: 38px;">Deployment Progress</h4>
             <hr>
               <div class="box-placement"> <!-- box placement -->

                   <div class="col-lg-5 box-content-wrapper">
                       <div class="box-header">
                           <h4>Progress Status</h4>
                       </div>
                       <div class="box-body">
                          <ol>
                              <li class="status-progress-round green"><span class="downloading-status">environment   </span></li>
                              <li class="status-progress-round pending"><span class="downloading-status">downloading</span><span class="check-placement"><i class="fa fa-check voilet"></i></span></li>
                              <li class="status-progress-round green"><span class="downloading-status">installation</span><span class="spinnner"><i class="fa fa-refresh fa-spin"></i></span><span class="check-placement"><i class="fa fa-check green"></i></span></li>
                              <li class="status-progress-round error"><span class="downloading-status">configuration</span></li>
                          </ol>
                        <div><button class="next-button">Continue</button></div>
                       </div>
                   </div>

                   
               <!-- second box ----->
                   
                   <div class="col-lg-5 box-content-wrapper">
                        <div class="box-header">
                           <h4>Progress Status</h4>
                       </div>
                       <div class="box-body">
                          <ol>
                              <li>Environment</li>
                              <li>downloading</li>
      ...

CSS

html, body {
      height: 100%;
      width: 100%;
  }

  html {
      display: table;
      margin: auto;
  }

.header{
    width: 100%;
    height: 34px;
    background: #3a5795;
    margin-top: 3px;
}

.box-content-wrapper{
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    background: #FFF;
    margin-right: 51px;
    min-width: 497px;
    box-shadow:8px 8px 5px #8E7373;
    border-top: 3px solid #D2CACA;
    margin-bottom: 38px;
}

.box-placement{
  position: relative;
  left: 61px;
}

ol {
  /* Name counter and set it to zero */
  counter-reset: list;
  
  list-style: none;
}

li.status-progress-round{
  /* Increment counter with every li */
 counter-increment: list;
  
  margin-bottom: 10px;
}

li.status-progress-round::before {
  /* Use ::before pseudoelement to show a custom counter with a leading zero */
  content: counter(list, decimal-leading-zero);

  /*background: #2b4353;*/
  
  font-family: Arial, sans-serif;
  color: #fff;
  font-size: 13px;
  text-align: center;

  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  line-height: 2.3em;
  display: inline-block;
  margin-right: 1em;
}

li.status-progress-round.green::before{
   background: #07844B;
}

li.status-progress-round.pending::before{
   background: #2b4353;
}

li.status-progress-round.error::before{
   background: #A11A06;
}

.downloading-status{
    font-size: 17px;
    background: rgba(140, 137, 137, 0.075);
    width: 100%;
    color: #186C7C;
}

.check-placement{
    left: auto;
    /*color: #12A560;*/
    font-size: 20px;
    padding: 16px;
}
.green{
   color: #07844B;
}
.voilet{
  color: #2b4353;
}
.error{
  color: #A11A06;
}
.next-button{
    width: 100%;
    background: #777;
    border: none;
    border-radius: 11px;
    height: 25px;
    color: #fff;
    font-size: 15px;
}

.next-button:hover{
   background: #5394A0;
   cursor: pointer;
}

.box-header h4{
   color:...