JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site">    <div id="navigation"><div class="menu"><ul><li class="page_item page-item-2 current_page_item">Home</li><li class="page_item page-item-5">Communicatie</li><li class="page_item page-item-8">Creatie</li><li class="page_item page-item-9">Portfolio</li><li class="page_item page-item-10">Contact</li></ul></div>
 </div>
    
      
    
    <div id="maincontent">Home</div>

    
</div>

CSS

.menu ul {    
    width:780px; 
    list-style: none;
    margin-bottom:-20px;
    position: relative;
    padding-top: 5px;
}
.menu li  {
    display: inline-block;
    font-size:16px;
    width:153px;
    text-align: center;
    border: 1px solid #FFF;
    overflow: hidden;
}
.menu li:hover {
    border: 1px solid #B1B3B6;
    border-radius: 25px 25px 0 0;
    border-bottom:none;
    background: #fff;
    padding:20px 0 20px 0;
    position: relative;
}

.menu li a {
    color: #292424;
    font-family: 'Century Gothic',sans-serif;
}

.menu li.current_page_item  { 
    border: 1px solid #B1B3B6;
    border-radius: 25px 25px 0 0;
    border-bottom:none;
    padding:20px 0 20px 0;
    background: #FFF;
    -moz-box-shadow: -7px 1px 20px 5px #888;
    -webkit-box-shadow: -7px 1px 20px 5px #888;
    box-shadow: -5px -2px 10px 1px #888;

}
.menu li.page-item-10  {
    padding-right: 5px;
}

#maincontent {
    height:auto;
    margin:0 auto;
    border:1px solid #b1b3b6;
    padding:45px;
    margin-top: 20px;
    border-top:none;
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 4px 10px 6px #888;
    background-color:#FFF;
}

#site {
    margin-left:25px;
}