JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div class="graph">
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
</div>

CSS

.graph {
    width: 200px;
    height: 32px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
}
.graph .bar {
    width: 10px;
    float: left;
    margin: 0 1px;
    height:30
}
.graph .bar .views {
    background-color: #ccc; 
    height:10px;
    position:relative;
}
.graph .bar .actions {
    background-color: red;
    position:relative;
    height:20px;
}