JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<div class="a">
  <div  style="width:100px;" class="bar bar-both"></div>
  <div  style="width:80px;" class="bar bar-both"> </div>
  <div  style="width:60px;" class="bar bar-both"> </div>
  <div  style="width:40px;" class="bar bar-both"> </div>
  <div  style="width:20px;" class="bar bar-both"> </div>
</div>
<div class="tw-bs">
  <div  style="width:100px;" class="bar bar-both"></div>
  <div  style="width:80px;" class="bar bar-both"> </div>
  <div  style="width:60px;" class="bar bar-both"> </div>
  <div  style="width:40px;" class="bar bar-both"> </div>
  <div  style="width:20px;" class="bar bar-both"> </div>
</div>

CSS

.bar {
      height: 24px;
      width: 100%;
      background-color: darkslateblue;
    }