JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    
    <h1 id="logo">Aux Fm</h1>

 
        <ul>
            <li><a href="#">Listen</a> |</li>
            <li><a href="#">Timetable</a> |</li>
            <li><a href="#">DJs</a> |</li>
            <li><a href="#">Contact</a> </li>
            
        </ul>
   
</div>

  <div class="h2">
<h2>Processed Beats</h2>
  </div>

CSS

#header{
margin:0px;
padding:0px;
color:white;
background-color:red;
width:100%;
}
 #logo{
display: inline;
}
#header ul {display: inline;}
#header ul li{
    display: inline;
}
#header ul li a{
text-decoration:none;
font-size:16px;
font-weight:bold;
color:white;
}
#header ul li a:hover{
text-decoration:underline;
}

.h2{
    width 300px;
}
}