JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/stylesheet.css"/>
                
        <title>Titel van de site</title>
    </head>
    <body>
        
    <div ID="container">    
        <div ID="header"> 
            <h2> site . nl</h2>
        </div>
            <!-- close header-->

        <div ID="bar">
             
            <ul ID="nav">
                    <li class="Tegels"><a href="index">Home</a></li>
                    <li class="Tegels"><a href="informatie">Informatie</a></li> 
                    <li class="Tegels"><a href="fotos">Foto's</a></li> 
                    <li class="Tegels"><a href="vereniging">Vereniging</a></li> 
                    <li class="Tegels"><a href="contact">Contact</a></li> 
                        
            </ul>                 
        </div>
        <!--close navbar-->
        
        <div ID="content">
              <!--hier onder komt die text dan-->                 
        </div>
        <!-- close content-->
         
        <div ID="footer">
            <ul>
                
                <li class="Onder">
                    <a href="http://www.nhl.com">
                        <span title="de website van de ">
                            NHL
                        </span>
                    </a>
                </li>
                <li class="Onder">
                    <a href="http://www.nfl.com">
                            <span  title="Klik hier voor contact informatie">
                                NFL
                            </span>
                    </a>
                </li>
                <li class="Onder">
                    <a href="http://www.nos.nl">
                        <span title="externe link">
                            NOS
                        </span>
                    </a>
                </li>
                   
            </ul>

        </div>
        <!--close footer-->


    </div>
    <!--close container-->
          ...

CSS

body{
    background-color:lightgray;
    }
    
/* divs */
#container{
         
}

#header{ 
    height:100px;
    margin-left:200px;
    margin-right:200px;
    margin-top:20px;
    background-color:white;
    
}

#bar{
    
    height:50px;
    margin-left:200px;
    margin-right:200px;
    margin-top:10px;
    margin-bottom:10px;
    background-color:#A60000;

}

#content{
    
    height:500px;
    background-color:white;
    margin-left:200px;
    margin-right:200px;
    margin-top:10px;
       
}



#footer{
    height:50px;
    background-color:#BF3030;
    margin-left:200px;
    margin-right:200px;
    margin-bottom:20px;
}

.Tegels a{
    height:27px;
    width:80px;
    float:left;
    margin-top:8px;
    margin-right:20px;
    margin-left:20px;
    text-align:center;
    border-radius:3px;
    padding-top:8px;
    }
    
.Onder a{
    height:27px;
    width:120px;
    padding:5px;
    margin-bottom:0px;
    margin-right:30px;
    margin-top:7px;
    float:left;   
    border-radius:5px;
    text-align:center;
    
}

/* links en tekst */
a{
     font-family:Verdana;
     text-decoration:none;
     color:black;
     font-size:12px;
    
}
  
h1{
    padding-top:20px;
    text-align:center;
    font-family:verdana;
    font-size:14px;
    color:black;
}
   
h2{
    font-family:verdana;
    font-size:40px;
    text-align:center;
    padding-top:20px;
    padding-left:50px;
    
}

h4{
    text-align:center;
    font-family:verdana;
    font-size:8px;
    color:black;
    }
    
li{
list-style:none;
}

p{  font-family:verdana;
    font-size:12px;
    color:black;
    margin-left:50px;
    margin-right:250px;
}

/* tabbladen opmaak */

.tabs{
    height:400px;
    width:150px;
    background-color:#A60000;
    margin-right:50px;
    margin-top:-25px;
    float:right;
    border-radius:3px;
    }
    
.tabs p{
    font-family:verdana;
    font-size:12px;
    color:white;
    margin-left:10px;
    margin-right:10px;
}
    
 /* animatie opmaak */
    .Tegels...

JavaScript

$(document).ready(function(){
    // index laden bij start
    $('#content').load('content/index.php');
    
    // navigatie laden bij klikken
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('content/' + page + '.php');
        return false;
    });
});