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:110%;
                    display:inline;
                    margin-left: -5%;
                    
                }
                #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-right:5%;
                    padding-left:5%;
                    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;
                }