JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
    <label data-role="none" id="date">Date :</label>
    <img src="images/overlay_divider_horizontal.png" id="splitter" />
    <label data-role="none" id="whiteboxlbl">Played numbers:</label>
    <br />
    <br />
</div>

CSS

#splitter {
    height:7px;
    margin:0;
    width:100%;
    display:inline;
}
#whiteboxlbl {
    font-size:16px;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
}
#date {
    font-size:16px;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
}
#container1 {
    display:block;
    margin-top:10%;
    padding-bottom:5%;
    padding-top:5%;
    background: transparent -moz-linear-gradient(top, #37b6d2 0%, #4398bf);
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#37b6d2), to(#4398bf));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #55b2be;
}
#container1 label {
    margin-right:5%;
    margin-left:5%;
}