JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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