JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="container">
    <div id="trotsop"></div>
    <div id="interieurprojecten"></div>
    <div id="interieurontwerpen"></div>
    <div id="keukens"></div>
    <div id="kastenwanden"></div>
    <div id="meubels"></div>
    <div id="bedrijven"></div>
    <div id="contact"></div>
</div>

CSS

#container {
    width:936px;
    height:auto;
    position:relative;
    margin: 0 auto;
}
.groen {
    color:#a3a800;
}
#logo {
    background-image:url(../images/logo_maatwerkinterieurs.jpg);
    width:622px;
    height:66px;
    float:left;
    margin-top:58px;
    margin-bottom:94px;
}
#navigatie {
    font-size:14px;
    font-weight:normal;
    font-family:Helvetica, Arial, sans-serif;
    color:#868686;
    position:absolute;
    top:124px;
    right:0px;
    z-index:5;
}
#temp {
    margin-top:3px;
}
#trotsop {
    position:absolute;
    top:254px;
    left:30px;
    width:506px;
    height:26px;
    z-index:50;
    float:left;
}
#interieurprojecten {
    float:left;
    width:322px;
    height:230px;
    background-color:#F00;
    margin-top:3px;
    margin-right:3px;
}
#interieurontwerpen {
    float:left;
    width:270px;
    height:230px;
    background-color:#F05;
    margin-top:3px;
    margin-right:3px;
}
#keukens {
    float:left;
    width:336px;
    height:230px;
    background-color:#F07;
    margin-top:3px;
}
#kastenwanden {
    float:left;
    width:322px;
    height:305px;
    background-color:#F09;
    margin-top:3px;
    margin-right:3px;
}
#meubels {
    float:left;
    width:318px;
    height:151px;
    background-color:#F02;
    margin-top:3px;
}
#bedrijven {
    float:left;
    width:318px;
    height:151px;
    background-color:#F03;
    margin-top:3px;
}
.bedrijven {
    float:left;
    width:318px;
    height:151px;
    background-color:#F03;
    margin-top:3px;
}
#contact {
    float:left;
    width:288px;
    height:305px;
    background-color:#F04;
    margin-top:-151px;
    margin-left:3px;
}

JavaScript

$('#interieurprojecten, #interieurontwerpen, #interieurprojecten, #keukens, #kastenwanden, #meubels, #bedrijven')
	    .mouseover(function () {
	    $(this).stop( true, true ).fadeTo("slow", 0.6, function () {});
	});
	$('#interieurprojecten, #interieurontwerpen, #interieurprojecten, #keukens, #kastenwanden, #meubels, #bedrijven').mouseout(function () {
	    $(this).stop( true, true ).fadeTo("slow", 1.0, function () {});
	});