JSFiddle - React, Tailwind, and code Playground

by Eric M

HTML

<div class="Past"></div>
<div class="DueInTwo"></div>
<div class="Ok"></div>
<div class="NoDue"></div>

CSS

div {
    height: 49px;
    width: 6px;
    margin-bottom: 5px;
}
.Past {
    background: repeating-linear-gradient(-45deg, #d19494 .03px, #ff0000 3.1px);
}
.NoDue {
    background-color: #b6cfd8;
}
.DueInTwo {
    background-color: #ffd200;
}
.Ok {
    background-color: #5dd255;
}