JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="header1"> <a href="index.html">
                   <img id="logo" href="#" src="Billeder/logo.png" alt="logo" height="140px" width="250px">
            </a>

            <div id="nav">
                <ul id="topmenu">
                    <li><a href="#">Forside</a>
                    </li>
                    <li><a href="#">Bowling</a>
                    </li>
                    <li><a href="#">Steakhouse</a>
                    </li>
                    <li><a href="#">Aktiviteter</a>
                    </li>
                    <li><a href="#">Kontakt</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="section">
            <div id="forsidebox">
                 <h1>Online Booking</h1>

                <hr>
                <p>Book bowling online på din computer</p> <a id="link" href="#">Klik her!</a>

            </div>
            <div id="forsidebox2">
                 <h1>Firmapakken</h1>

                <hr>
            </div>
            <div id="forsidebox3">
                 <h2>Hold julefrokost i Lyng Bowl</h2>

                <hr>
            </div>
            <div id="forsidebox4">
                <img id="buffetbanner" href="#" src="Billeder/buffetbanner.jpg" alt="buffetbanner" height="300px" width="800px">
            </div>
        </div>
        <div id="bottombox">
            <p2>"FirmaNavn" | *Adresse* | *Postnummer By* | *Telefonnummer* | <a id="mail" href="mailto:*email*" target="_top">*email*</a>

            </p2>
        </div>
    </div>
</body>

CSS

/*-------------------Wrapper---------------------
------------------------------------------------*/
 #wrapper {
    position: relative;
    margin: 0% auto;
    width:80%;
}
/*-------------------Body------------------------
------------------------------------------------*/
 body {
    margin-top: 20px;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background: url("../Billeder/bg.png") no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/*-----------------Head Menu---------------------
-----------------------------------------------*/
 #logo {
    display: inline;
    margin-left: 15px;
    margin-top: 5px;
    float: left;
}
#header1 {
    background: #191919;
    opacity: 0.95;
    height: 130px;
    width: 1020px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px #000000;
}
#nav {
    padding-top: 25px;
    padding-right: 25px;
}
ul#topmenu {
    list-style: none;
    float: right;
}
ul#topmenu li {
    display: inline;
}
ul#topmenu li a {
    color: #FFFFFF;
    text-decoration: none;
    font-family:"Calibri", sans-serif;
    font-size: 30px;
    font: bold;
    padding: 10px;
}
ul#topmenu li a:hover {
    color: #FFFFFF;
    font: bold;
    text-shadow: 0px 0px 30px #06e0e7;
}
/*-----------------Section-----------------------
-----------------------------------------------*/
 #section {
    background: #FFFFFF;
    opacity: 0.92;
    width: 1000px;
    height: content-box;
    box-shadow: 0px 0px 15px #000000;
    padding: 10px;
}
#forsidebox, #forsidebox2, #forsidebox3 {
    background: #292929;
    width: 303px;
    height: 220px;
    display: inline;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin: 5px;
}
#forsidebox4 {
    clear: both;
    background: #292929;
    width: 989px;
    height: 365px;
    display: inline-block;
    margin-top: 10px;
    margin-left: 5px;
...