JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html>
<head>
  <meta name="viewport" content="user-scalable=no, width=device-width" />
  <title>Title</title>
</head>
<body>        
    <ul>
       <li id="header_list">
         <a href="http://whatever">
            <span id="main_title">title</span>
            <img id = "logo" src="logo.png"/>
         </a>
      </li> 
    </ul>
    </body>
</html>

CSS

body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
    font-family: Helvetica; 
    margin: 0;              
    padding: 0;
}

#header_list {
    position:static;
    background-image: url("track_row_unselected.png");
    margin: 0;              
    padding: 0;
    height:80px;
}

#header_list:active {
    background-image: url("track_row_selected.png");
}

#header_list a {
    text-decoration: none;   
}


#logo {
    position: relative;
    top: 7px;
    left: 140px;
    width: 40px;
    height: 40px;
    padding:0;
    margin:0;
    -webkit-box-shadow: 7px 7px 8px rgba(81, 81, 81, 0.5);
}

#main_title {
    position:relative;
    top:5px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    color:black;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 2px #f5f5f5;
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}