JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<title> Haltqt - Accounts </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div id="banner">

</div>

<div id="content">
hier komt content
<div id="product">
Hier product 
</div>
</div>
<div id="classen"> hier komen de classes
</div>

</body>

<footer> &copy Haltqt-accounts.com </footer>

</html>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#banner {
margin:0px;
padding:0px;
width:100%;
height:300px;
background-color:#000; /* deze staat nu op zwart, dit is de banner. dit moeten we op transparant zetten en in de body een wallpaper als achtergrond om het effect te krijgen van eu-accounts.com*/ 
}

#content {
margin: 0 0 0 15%;
padding:0;
width: 70%;
    float:left;
background-color:yellow;
}

footer{
    clear:both;
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
}

#classen {
width:15%;
padding:0;
float:right;
background-color:red;
}

#product {
margin:5px;
padding:5px;

}