JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/theus/chart.css/v1.0.0/dist/chart.css">
<div class="charts">
    <h1>棒グラフ（横）</h1>

  <div class="charts__chart chart--p100 chart--default chart--xl" data-percent></div><!-- /.charts__chart -->

  <div class="charts__chart chart--p81 chart--blue chart--xl" data-percent></div><!-- /.charts__chart -->

  <div class="charts__chart chart--p65 chart--green chart--xl" data-percent></div><!-- /.charts__chart -->

  <div class="charts__chart chart--p48 chart--red chart--xl" data-percent></div><!-- /.charts__chart -->

  <div class="charts__chart chart--p24 chart--yellow chart--xl" data-percent></div><!-- /.charts__chart -->

  <div class="charts__chart chart--p8 chart--grey chart--xl" data-percent></div><!-- /.charts__chart -->
</div><!-- /.charts -->

<div class="charts charts--vertical">

     <h1>棒グラフ（縦）</h1>

  <div class="charts__chart chart--p80  chart--blue    chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p60  chart--green   chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p40  chart--red     chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p20  chart--yellow  chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p5   chart--grey    chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->




</div><!-- /.charts -->