JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="bar content40">
    <div class="fill"></div>
    <div class="arrow"></div>
    <div class="total">50</div>
</div>

CSS

.bar {
    background:#ECECEC;
    height:100px;
    width:30px;
    position:relative;
}
.fill {
    width:100%;
    background:#0DD30D;
    bottom:0;
    position:absolute;
}
.content40 .fill {
    height:50%;
}
.content40 .arrow {
    bottom:50%;
}
.arrow {
    border-top: 10px solid transparent;
    border-right: 30px solid #0DD30D;
    position:absolute;
}
.total{transform:rotate(-90deg);height:30px;
line-height:30px;text-align:center;font-size:20px;}