JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <title>Werkweek</title>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery("#addLeerlingen").hide();

                jQuery("#showAddLeerlingen").click(function() {
                    jQuery(this).next("#addLeerlingen").slideToggle(400);
                });
            });
        </script>
    </head>
    
    <body>
        <section>
            <div id="navbar">	<a href="index.php"><h1>Werkweek</h1></a>

                <nav>
                    <ul>
                        <li id="indexLink" class="active"><a href="#">Home</a>

                        </li>
                        <li id="leerlingLink"><a href="#">Leerlingen</a>

                        </li>
                        <li id="bestemmingLink"><a href="#">Bestemmingen</a>

                        </li>
                        <li id="betalingLink"><a href="#">Betalingen</a>

                        </li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <div id="index">
                    	<h2>De Werkweek</h2>

                    <p>De leerlingen hebben zich ingeschreven voor de werkweek, de definitieve
                        bestemming is bekend gemaakt en nu moeten ze gaan betalen.</p>
                    <p>Hier kunt u bijhouden wie al betaald heeft en hoeveel. De leerlingen mogen
                        namelijk in gedeelten betalen. Om het overzichtelijk te houden hebben wij
                        deze database gamaakt. Hier kunt u leerlingen, bestemmingen en betalingen
                        toevoegen, aanpassen en verwijderen.</p>
                </div>
                <div id="leerling" class="off">
                    	<h2>Leerlingen</h2>

...

CSS

* {
    margin:0;
    padding:0;
}
/* Main tags */
 body {
    margin:0;
    padding:0;
    color:#404040;
    background:#f2f2f2;
    font:76% Verdana, Tahoma, sans-serif;
    overflow-y: scroll
}
img.banner {
    margin:10px auto 10px auto;
    padding:1px;
    background:#ffffff;
    border:1px solid #d0d0d0;
}
a {
    color:#d85d5d;
    font-weight:bold;
    text-decoration:none;
}
a:hover {
    color:#505050;
    text-decoration:underline;
}
a img {
    border-color:#d85d5d;
}
a img:hover {
    background:#d85d5d;
    border-color:#d85d5d;
}
/* section */
 section {
    margin:0
}
/* Left sidebar */
 #navbar {
    width:100%;
    height:47px;
    background:#e0e0e0;
    float:left;
    border-bottom:solid 2px #C0C0C0;
    margin:0 auto;
    position:fixed;
    top:0px;
    box-shadow: 0px 2px 10px #333333;
}
#navbar h1 {
    margin: 0 15px;
    color:#d85d5d;
    font-size:36px;
    display:inline;
    float: left;
    font-weight: normal;
}
/* Navigation menu */
 nav li {
    display:inline;
    width:150px;
    padding:12px;
    color:#606060;
    background:#e0e0e0;
    font-size:19px;
    font-weight:normal;
    text-decoration:none;
    text-align: center;
    float: left;
}
nav li:hover {
    color:#303030;
    background:#bababa;
}
nav li.active {
    padding:12px;
    background:#f0f0f0;
}
nav li.active:hover {
    color:#303030;
    background:#fafafa;
}
nav a {
    color:#606060;
    font-weight:normal;
    text-decoration:none;
    letter-spacing:-1px;
}
nav a:hover {
    color:#303030;
    text-decoration:none;
}
/* Content area */
 #content {
    margin:50px auto 0 auto;
    width:60%;
    min-width: 900px;
    height:100%;
    padding: 20px 35px;
    background:#ffffff;
    border-left: solid 2px #C0C0C0;
    border-right: solid 2px #C0C0C0;
    border-bottom: solid 1px #D0d0d0;
}
#content p {
    margin:2px 0 20px 5px;
    line-height:1.3em;
    padding:0 5px;
}
#content img {
    float: left;
    margin-top: 5px;
    margin-right:3px;
   ...

JavaScript

var x = 300;
$(function () {
    $("#indexLink,#betalingLink,#bestemmingLink,#leerlingLink").click(function () {
        $("#content>div").not("#start").hide(x);
        $("#"+$(this).attr("id").slice(0,-4)).show(x);
        $('nav>ul>li').removeClass('active');
        $('#indexLink').addClass('active');
    });
});