JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="DK">
        <head>
        <title>******</title>
        <meta charset="utf-8" />
                <link rel="Stylesheet" type="text/css" href="css\Stylesheet.css">
        </head>
    <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>
</html>

CSS

/*-------------------Wrapper---------------------
------------------------------------------------*/
#wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
 
/*-------------------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;
   ...