JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="attendance">
<p class="title">attendance</p>
<div class="attendance-bar">
<div class="attendance-level"></div>
<div class="attendance-cage-css">
<div class="crossbar-1"></div>
<div class="crossbar-2"></div>
<div class="crossbar-3"></div>
<div class="crossbar-4"></div>
<div class="crossbar-5"></div>
<div class="crossbar-6"></div>
<div class="crossbar-7"></div>
<div class="crossbar-8"></div>
<div class="crossbar-9"></div>
</div>
</div>
</div>
</div>
CSS
.container{
}
.attendance{
}
.attendance .title{
}
.attendance-bar{
}
.attendance-cage-css{
}
.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
}
.bar-1{
}
.bar-2{
}
.bar-3{
}
.bar-4{
}
.bar-5{
}
.bar-6{
}
.bar-7{
}
.bar-8{
}
.bar-9{
}
.attendance-level{
}
JavaScript
// JQuery is fair game if you don't see a pure CSS solution