JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloze pagina</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Menu.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="wb_LayoutGrid2">
<div id="LayoutGrid2">
<div class="col-1">
</div>
<div class="col-2">
<div id="wb_master_CssMenu1" style="display:inline-block;width:100%;z-index:0;">
<ul id="master_CssMenu1" role="menubar" class="nav">
<li class="nav-item firstmain"><a role="menuitem" class="nav-link" href="./#t1" target="_self">Start</a>
</li>
<li class="nav-item"><a role="menuitem" class="nav-link withsubmenu" href="./#c1" target="_self">Actueel</a>

<ul role="menu">
<li class="nav-item firstitem"><a role="menuitem" class="nav-link" href="" target="_self">blog</a>
</li>
<li class="nav-item"><a role="menuitem" class="nav-link" href="" target="_self">verkoop</a>
</li>
<li class="nav-item lastitem"><a role="menuitem" class="nav-link" href="" target="_self">retour</a>
</li>
</ul>
</li>
<li class="nav-item"><a role="menuitem" class="nav-link" href="./#c2" target="_self">Menu</a>
</li>
<li class="nav-item"><a role="menuitem" class="nav-link" href="./#c3" target="_self">Foto's</a>
</li>
<li class="nav-item"><a role="menuitem" class="nav-link withsubmenu" href="./#c4" target="_self">Contact</a>

<ul role="menu">
<li class="nav-item firstitem"><a role="menuitem" class="nav-link" href="#" target="_self">Locatie</a>
</li>
<li class="nav-item lastitem"><a role="menuitem" class="nav-link" href="" target="_self">info</a>
</li>
</ul>
</li>
</ul>

</div>
</div>
</div>
</div>
</body>
</html>

CSS

body {
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a {
   color: #0000FF;
   text-decoration: underline;
}
a:visited {
   color: #800080;
}
a:active {
   color: #FF0000;
}
a:hover {
   color: #0000FF;
   text-decoration: underline;
}
input:focus,
textarea:focus,
select:focus {
   outline: none;
}
#wb_master_CssMenu1 {
   background-color: transparent;
   border: 0px solid #C0C0C0;
   margin: 0;
   text-align: left;
   z-index: 1111  !important;
}
#wb_master_CssMenu1 ul {
   display: inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0;
   position: relative;
}
#wb_master_CssMenu1 li {
   float: left;
   margin: 0;
   padding: 1px 1px 1px 0px;
   width: 60px;
}
#wb_master_CssMenu1 a {
   background-color: #FFFFFF;
   background-color: rgba(255,255,255,0.00);
   background-image: none;
   border: 0px solid #C0C0C0;
   color: #FFFFFF;
   display: block;
   float: left;
   font-family: Tahoma;
   font-size: 16px;
   font-style: normal;
   font-weight: normal;
   height: 45px;
   line-height: 45px;
   padding: 0px 0px 0px 0px;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   width: 60px;
}
#wb_master_CssMenu1 li:hover a,
#wb_master_CssMenu1 a:hover {
   background-color: #FFFFFF;
   background-image: none;
   border: 0px solid #C0C0C0;
   color: #969696;
}
#wb_master_CssMenu1 li.firstmain {
   padding-left: 1px;
}
#wb_master_CssMenu1 li.lastmain {
   padding-right: 1px;
}
#wb_master_CssMenu1 li:hover,
#wb_master_CssMenu1 li a:hover {
   position: relative;
}
#wb_master_CssMenu1 a.withsubmenu {
   background-image: none;
   padding: 0 5px 0 5px;
   width: 50px;
}
#wb_master_CssMenu1 li:hover a.withsubmenu,
#wb_master_CssMenu1 a.withsubmenu:hover {
   background-image: none;
}
#wb_master_CssMenu1 ul ul {
   background-color: transparent;
   border: none;
   height: auto;
   left: 0;
   position:...

JavaScript

$(document).ready(function(){
$( "ul li a" ).addClass(function( index ) {
  return "item-" + index;
});
  });