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="container">
                        <div id="classen">hier komen de classes</div>
            <div id="content">hier komt content
                <div id="product">Hier product</div>
            </div>

        </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*/
}

#container {
    width:auto;
    overflow: hidden;
}
#content {
    padding:0;
    width:auto;
    overflow:hidden;
    background-color:yellow;
}
footer {
    margin: 0 auto;
    padding:0;
    width: 70%;
    text-align:center;
    clear:both;
}
#classen {
    width:15%;
    margin:0 auto;
    padding:0;
    float:right;
    background-color:red;
}
#product {
    margin:5px;
    padding:5px;
}