JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
 
 
   <div id="box">
        <div id="titel">Titel1</div>
        <div id="titel2">Titel2</div>
   </div>
 
  <div id="menu">
     <a href="#" >Menu1 |</a>
     <a href="#" >Menu2 |</a>
     <a href="#" >Menu3 </a>
  </div>
 
</div>

CSS

#box{
    width:500px;
    height: 200px;
    background-color: #000000;
}
 
#content{
    width: 500px;
    height: 250px;
    background-color: #cccccc;
    margin: auto;
    position: absolute;
    top:50%;
    left:50%;
    margin:-50px auto auto -250px;
}
 
#titel{ 
    font-family: arial; 
    font-size: 50px; 
    color: #FF0000; 
    text-align: center;
}
#titel2{ 
    font-family: arial; 
    font-size: 50px; 
    color: #000000; 
    text-align: center;
}
 
#menu{ 
    float: left; 
    /*margin-top: 100px;*/
    position: absolute; 
    background-color: #ff0000;
}