JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>

CSS

div {
    height: 100px;
    position: relative;
    line-height: 100px;
    vertical-align: middle;
    margin-bottom: 20px;
    text-align: center;
}
.a {
    background: #9C9E9F;
}
.b {
    background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    display: block;
    position: absolute;
}
.a:after {
    background: #f6f6f6;    
}
.c:before {
    background: #9c9e9f;
    left: 0;
}
.c:after {
    background: #33CCFF;
    right: 0;
    height: 80%;
}