JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w">
    <div class="aw"></div>
    <div class="ww">test test test</div>
    <div class="bw"></div>
</div>

CSS

html, body{margin: 0; padding:0}
    .w{
        height:35px;
        width: auto;
        float: left;
        background: rgb(135,224,253);
        background: -moz-linear-gradient(45deg,  rgb(135,224,253) 0%, rgb(83,203,241) 40%, rgb(5,171,224) 100%);
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(135,224,253)), color-stop(40%,rgb(83,203,241)), color-stop(100%,rgb(5,171,224)));
        background: -webkit-linear-gradient(45deg,  rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
        background: -o-linear-gradient(45deg,  rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
        background: -ms-linear-gradient(45deg,  rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
        background: linear-gradient(45deg,  rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=1 );
    }
    .ww {height:35px;
        float: left;

        background: url("http://puu.sh/eJMNv/ddbaad35bd.png") repeat-x;

    }
    .aw{height:35px;width: 14px;
        background: url("http://puu.sh/eJMFb/f01e8ff340.png") no-repeat;
        float: left;
    }
    .bw{height:35px;width: 14px;
        background: url("http://puu.sh/eJNfD/0e36250d5c.png") no-repeat;
        float: left;
    }