JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<div class="dashboard__threat-type-chart">
  <div class="dashboard__threat-chart-bar-container">
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:30%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:60%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:30%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:60%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:30%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:60%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:30%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:60%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:30%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
    <div class="dashboard__threat-chart-bar-item">
      <div class="dashboard__threat-chart-bar" style="height:60%"></div>
      <div class="dashboard__threat-chart-num">1</div>
    </div>
...

CSS

.dashboard__threat-type-chart {
  width: 400px;
  height: 350px;
  
}
.dashboard__threat-chart-bar-container{
  height: 100%;
  width: 100%;
  display:flex;

}
.dashboard__threat-chart-bar-item {
  position: relative;
  flex-grow: 1;
  height: 100%;
  border-right: 1px solid #bfbfbf;
  box-sizing: border-box;
}
.dashboard__threat-chart-bar-item:last-child {
  border: none;
}

.dashboard__threat-chart-bar {
  background: #a7a6a8;
  height: 30%;
  position: absolute;
  bottom: 20px;
  width: 100%;
}
.dashboard__threat-chart-num {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  font-size: 10px;
  font-style: italic;
}

JavaScript

https://jsfiddle.net/bergb/t3czqb2u/9/#