JSFiddle - React, Tailwind, and code Playground

HTML

<div class="orange_bk">Outstanding</div>
<div class="black_bk">Play</div>

CSS

.orange_bk, .black_bk {
    color:#fff;
    float: left;
    background: #fb892b;
    width: 50%;
    height: 16px;
    line-height: 2em;
    text-align: center;
    font-size: 15px;
    border-radius:.25em 0 0 .25em;
    padding:.25em 0;
    font-weight:bold;
    font-family: sans-serif;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0.00)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
}
.black_bk {
    float: right;
    background: #000;
    border-radius: 0 .25em .25em 0
}