JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id = "container">
			<div id = "wrapper">
				<div id = "wrapper_cont">
					<a href = "index.php"><img src = "img/logo.png" alt = "inhoud" id = "wrapper_logo" /></a>
				</div><!-- Wrapper_cont -->
			</div><!-- wrapper -->
			
			<div id = "nav">
				<ul>
					<li><a href = "index.html">Home</a></li>
					<li><a href = "#">Cursussen</a>
						<ul class="sub-nav">
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
							<li><a href = "">Link Item</a></li>
						</ul>
					</li>
					<li><a href = "##">Aanmelden</a></li>
					<li><a href = "contact.html">Contact</a></li>
				</ul>
			</div><!-- nav -->
			<class = "clearFloat" />
			
			<div id = "top_text">
				<span><h1>SiteNAAM!</h1></span> <h2>Tweede titel</h2>.
			</div><!-- top_text -->

CSS

/*** RESET **/
*{margin: 0; padding: 0;}

/*** LINK RESET **/
a:link, a:visited, a:hover, a:active{
	text-decoration: none;
	color: black;
	outline: none;
}

/*** IMG **/

img{border: 0;}

/*** BODY **/

html, body{
	Background: #F5F5F5;
}

/*** CONTAINER **/


#container{
	margin: 0 auto;
	padding: 0;
	width: 1366px;
}

/*** WRAPPER **/

#wrapper{
	background-image: url("../img/header.png");
	height: 100px;
	margin: 0 auto;
}

#wrapper_cont{
	margin-left: auto;
	margin-right: auto;
	width: 36%;
}

#wrapper_logo{
	height: 180px;
	margin-top: 12px;
	position: relative;
	width: 500px;
	z-index: 9999;
}

/*** NAV **/

#nav ul{
	background: #eaeaea;    
	box-shadow: 0 1px 1px 0px black;
	height: 55px;
	margin-left: 1px;
	width: 99.9%;
}

#nav ul li{
    list-style: none;
	float: left;
	position: relative;
}

#nav ul li a{
    border-right: 1px solid #939393;
    color: #000;
    float: left;
    font-weight: bold;
    height: 23px;
    padding: 16px 2px;
    text-align: center;
    width: 110.5px;
}

#nav ul li a:hover{
    color: #D21E39;
    background: #eaeaea;
}

#nav ul li:last-child a{
    border-right: none;
}

#nav ul ul{
    position: absolute;
    visibility: hidden;
    top: 55px;
	left: -1px;
}

#nav ul li:hover ul li{
	background: #ccc;
}

#nav ul li:hover ul{
    visibility: visible;
}

/*** CLEAR FLOAT **/

.clearFloat{
		clear: both;
	}

/*** toptext **/

span h1{
    display: inline;
    color: rgb(210,30,57);
    font-size: 45pt;
    font-style: italic;
    font-family: verdana;
    font-weight: bold;
    text-align: center;
}

#top_text{
    color: rgb(224,42,69);
    font-size: 23px;
    font-style: italic;
    font-family: verdana;
    font-weight: bold;
    margin-top: 65px;
    text-align: center;
    width: 1366px;
}

#top_text h2{
    display: inline;
    font-size: 23px;
}

/*** CONTENT **/

#content{
    min-height: 400px;
    margin-top: 30px;
    width: 1366px;
}

#content p{
    width: 500px;
    text-indent: 10px;
}

#text{
    margin:...