JSFiddle - React, Tailwind, and code Playground

HTML

<span class="pill"></span>

CSS

body { text-align: center; padding: 200px 0; background-color: #d9e9ed; background-image: -webkit-radial-gradient(#FFF, #d9e9ed); background-position: center; background-size: 100% 1200px; overflow: hidden; }
.pill {
    border-radius: 18px;
    height: 36px;
    width: 200px;
    background: url(http://f.cl.ly/items/0Q0I0w1l3q121j1c2b3H/dirt.png) repeat, -webkit-linear-gradient(135deg, #bc3737 49.5%, #983e44 50%, #6ca8c3 50.5%, #2c90be 51%);
    display: inline-block;
    box-sizing: border-box;
    box-shadow: inset rgba(255,255,255,0.1) 0 1019px 0 -1000px;
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgba(255,255,255,0.15)));
    position: relative;
}