JSFiddle - React, Tailwind, and code Playground

by Erno

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto+Condensed"></script>
<title>home img-blocks</title>
<body>
    </br>
    <div class="content940 roboto-norm">
        <div class="row pad-11-bottom">
            <div class="col8 col-last">
                	<h2 class="roboto-title">DE LAATSTE CATWALKTRENDS</h2>

                <p>Ontdek welke nieuwe monturen bij de nieuwste mode past</p>
                <div class="duo-button mar-11-top">	<a id="btn-left" class="left-side" href="#">Heren</a>
	<a id="btn-right" href="#">Dames</a>

                </div>
                <div style="clear:both;"></div>
                	<h2 class="roboto-title">SMART BUSINESS</h2>

            </div>
        </div>
        <div class="row mar-11-top">
            <div class="col8 col-last">
                <div class="collection">
                    <img src="http://placehold.it/201x218" alt="">	<a href="#" class="btn-white">(H)Bekijk montuur</a>

                </div>
                <div class="collection">
                    <img src="http://placehold.it/201x218" alt="">	<a href="#" class="btn-white">(H)Bekijk montuur</a>

                </div>
                <div class="collection">
                    <img src="http://placehold.it/201x218" alt="">	<a href="#" class="btn-white ">(H)Bekijk montuur</a>

                </div>
                <div style="display:none" class="collection-dames">
                    <img src="http://placehold.it/201x218"> <a href="#" class="btn-white">
                        (D)Bekijk montuur</a>

                </div>
                <div style="display:none" class="collection-dames">
                    <img src="http://placehold.it/201x218"> <a href="#" class="btn-white">
                        (D)Bekijk montuur</a>

                </div>
                <div style="display:none" class="collection-dames">
                    <img src="http://placehold.it/201x218"> <a href="#" class="btn-white">
                        (D)Bekijk...

CSS

.content940, .content701 {
}
* {
    font-size: 14px;
    margin: 0;
    padding: 0;
}
p {
    font-size: 14px;
}
img {
    display: block;
}
.center {
    text-align: center;
}
/* indeling rijen */
 .row {
    width: 940px;
    clear: both;
    float: left;
}
.content701 .row {
    width: 701px;
}
.content940 .row {
    width: 940px;
}
.row-last {
    margin-bottom: 0;
}
/* indeling kolommen 701 */
 .content701 {
    width: 701px;
    float: right;
}
.content701 .col1 {
    width: 167px;
    margin-right: 11px;
    float: left;
}
.content701 .col2 {
    width: 345px;
    margin-right: 11px;
    float: left;
}
.content701 .col3 {
    width: 523px;
    margin-right: 11px;
    float: left;
}
.content701 .col4 {
    width: 701px;
    margin-right: 11px;
    float: left;
}
.content701 .col-last {
    margin-right: 0px;
}
/* Offsets */
 .content701 .col-offset1 {
    margin-left: 178px;
}
.content701 .col-offset2 {
    margin-left: 337px;
}
.content701 .col-offset3 {
    margin-left: 516px;
}
/* contentNorm */
 .contentNorm H3 {
    margin: 30px 0;
}
/* indeling kolommen 940 */
 .content940 {
    width: 940px;
}
.content940 .col1 {
    width: 108px;
    margin-right: 11px;
    float: left;
}
.content940 .col2 {
    width: 227px;
    margin-right: 11px;
    float: left;
}
.content940 .col3 {
    width: 340px;
    margin-right: 11px;
    float: left;
}
.content940 .col4 {
    width: 465px;
    margin-right: 11px;
    float: left;
}
.content940 .col6 {
    width: 700px;
    margin-right: 11px;
    float: left;
}
.content940 .col8 {
    width: 940px;
    margin-right: 11px;
    float: left;
}
.content940 .col-last {
    margin-right: 0px;
}
.content940 .col1.col-last {
    width: 107px;
}
.content940 .col2.col-last {
    width: 226px;
}
.content940 .col4.col-last {
    width: 464px;
}
/* Offsets 940 */
 .content940 .col-offset1 {
    margin-left: 119px;
}
.content940 .col-offset2 {
    margin-left: 240px;
}
.content940 .col-offset3 {
    margin-left: 360px;
}
.content940...

JavaScript

$("#btn-left").click(function () {
    if (!($(".collection").is(":visible"))) {
        $(".collection").fadeIn(1000);
        $(".collection-dames").hide();

        $("#btn-left").css("background-color", "black");
        $("#btn-left").css("color", "white");
        $("#btn-right").css("background-color", "white");
        $("#btn-right").css("color", "black");

    }

});

$("#btn-right").click(function () {
    if (!($(".collection-dames").is(":visible"))) {
        $(".collection-dames").fadeIn(1000);
        $(".collection").hide();

        $("#btn-right").css("background-color", "black");
        $("#btn-right").css("color", "white");
        $("#btn-left").css("background-color", "white");
        $("#btn-left").css("color", "black");


    }
});