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 lang="nl">

  <head>
<?
require 'definitie.php';
require 'verbinding.php';
?>
    <title><?php echo INDEX_TITEL; ?></title>
	<link rel="stylesheet" href="./css/style.css" type="text/css">
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script>
	<script type="text/javascript" src="./js/kaart.php"></script>

  </head>

<body onload="getMap()">
<div id="bovenkant"><? echo MENU; ?></div>

<div id="map">
</div>

<div id="box">

	<b><? echo INDEX_BOX_WELKOM; ?></b>

	<p><? echo INDEX_BOX_INHOUD; ?></p>

</div>


<div id="midden">
	<div id="margin"></div>
   		<div id="box_midden_inhoud">
        <b><?php echo INDEX_BOX_MIDDEN_TITEL; ?></b>
        <?php
        $query = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,7"; // Formulering van de query
        $resultaat = mysql_query($query); //query uitvoeren
        while ($row = mysql_fetch_array($resultaat)){
        ?>
        <?php echo "
        <a href='./blog.php?id=".$row['id']."'>
        <p>".$row['plaats']." | ".$row['datum']."</p>
        ".$row['titel']."
        </a><br>
        "; ?>
        <?php
        }
        ?>
        </div>
        
        <div id="box_midden_inhoud1"></div>
    </div>

<div id="onderkant">
<? echo COPYRIGHT; ?>
</div>


</body>

</html>

CSS

body, html, #map {
		margin: 0;
		width: 100%;
		height: 85%;
		text-align: left;
				color: black;
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		}
		/* bovenkant */
		
		#bovenkant{
		width: 100%;
		height: 40px;
		background-color: black;
		text-align: center;
			line-height: 250%;
			vertical-align: middle;
			color: white;
			font-weight: bold;
			font-size: 18px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
		}
		
		#bovenkant a:link {
			color: white;
			text-decoration: none;
		}

		#bovenkant a:visited {
			color: white;
			text-decoration: none;
		}

		#bovenkant a:hover {
			color: #F90;
			text-decoration: none;
		}
		
		/* box */
		
		#box{
			width: 300px;
			background: rgba(0,0,0,0.8);
			z-index: 1000;
			position: absolute;
			top: 80px; 
			left: 50px;
			padding: 10px;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-o-border-radius: 10px;
			-webkit-border-radius: 10px;
			-ms-border-radius: 10px;
			text-align: left;
				color: white;
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		}

		#midden{
		background-color: #DBA901;
		width: auto;
		height: auto;
		overflow: hidden;
		height: 750px;
		}
		
		#margin{
		background-color: transparent;
		width: auto;
		height: 50px;
		}
		

		#box_midden_inhoud{
		width: 500px;
		height:auto;
		float: left;
		padding: 10px;
		background-color: #E6E6E6;
		border-radius: 10px;
		text-align: left;
			color: #600;
			font-weight: bold;
			font-size: 15px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
		}
		
		#box_midden_inhoud1{
		width: 500px;
		height:auto;
		float: left;
		margin-left: 200px;
		padding: 10px;
		background-color: #E6E6E6;
		border-radius: 10px;
		text-align: left;
			color: #600;
			font-weight: bold;
			font-size: 15px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
		}
		
		
			#box_midden_inhoud a:link {
				color: #630;
				text-decoration: none;
			}
	
			#box_midden_inhoud a:visited...