JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <body>
        <div id="container">
            <div id="header">
                <div id="top">

                    <div id="logo">
                        <a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
                    </div>
                    
                    <div id="topmenu">
                        <ul>
                            <li><a href=""><span>over</span> ons</a></li>

                            <li><a href=""><span>onze</span> partners</a></li>
                            <li><a href="">contact</a></li>
                            <li><a href="">helpdesk</a></li>
                        </ul>
                    </div>
                    
                    <div style="clear: both;"></div>

                </div>
                
                <div id="visual" class="long visual">
                    <div id="mainmenu">
                        <div class="expandcollapse">
                            <a href=""><span>inklappen</span> &uarr;</a>
                        </div>
                    </div>
                    
                    <div id="mainsubmenu">

                        <ul>
                            <li><a href="">wat is webhosting?</a></li>
                            <li><a href="">onze service</a></li>
                            <li><a href="">pakketten en prijzen</a></li>
                            
                        </ul>
                    </div>
                </div>

            </div>
            
            <div id="contentcontainer">
                <h1>wee!</h1>
                <p>test</p>
            </div>
            
            <div id="footer">
                <p style="width: 100%; text-align: right;">sitemap - algemene voorwaarden - auteursrecht</p>

            </div>
  ...

CSS

/* mindcontrolled.nl
*/

body {
    background-color: #f5f5f5;
    
    padding: 0;
    margin: 0;
    
    /*font-family: arial, sans-serif;*/
    font-family: tahoma, sans-serif;
    color: black;
}

a {
    text-decoration: none;
}

#container {
    width: 936px;
    margin: 0 auto;
    
    background-color: white;
}

#header {
    margin-top: 0.8em;
}

#container, #top, #contentcontainer {
    padding: 12px;
}

#logo {
    float: left;
    
    margin: 0;

    font-size: 2em;
    letter-spacing: -2px;
}

#topmenu {
    margin-top: 1em;
    padding: 0;
    float: right;
    
    font-weight: bold;
}

#topmenu ul, #mainsubmenu ul {
    margin: 0;
    padding: 0;
    
    list-style-type: none;
}

#topmenu li, #mainsubmenu li {
    display: inline;    
}

#topmenu li {
    margin-left: 20px;
}

#topmenu li:first-child {
    margin-left: 0;
}

#topmenu a {
    color: #005288;
}

#topmenu a:hover {
    color: #00aeef;
}

#topmenu a span {
    color: #005288;
}

#visual {
    width: 100%;
    height: 264px;

    position: relative;
    
    background-image: url(../images/headers/colorbokeh.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}

#mainmenu {
    height: 2.4em;
    width: 100%;
    
    position: absolute;
    bottom: 24px;
    
    background-image: url(../images/transparent.png);
}

#mainmenu a {
    color: white;
}

#mainmenu a span {
    text-decoration: underline;
}

#mainmenu .expandcollapse {
    position: absolute;
    
    top: 12px;
    right: 12px;
    
    font-size: 0.7em;
}

#mainsubmenu {
    width: 912px; /* 100% minus padding; */
    height: 21px;

    padding: 3px 12px 0px 12px;

    position: absolute;
    bottom: 0;

    background-color: #00aeef;
}

#mainsubmenu ul {
    margin: 0;
    
    color: white;
    
    font-size: 0.8em;
    font-weight: bold;
}

#mainsubmenu li {
    margin-left: 30px;
}

#mainsubmenu li:first-child {
    margin-left: 0;
}

#mainsubmenu a {
    color:...