JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.inner{
    position: relative;
    z-index: 1;
    width: 300px;
    height: 40px;
    margin: auto;
    background: #ccc;
}

.outer{
    position: relative;
}

.outer:after{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50%;
   background: #094;
}