JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<div id="wrapper">
    <div id="faux">
        Ik ben een player, jwz
    </div>
    <div class="block">Ik ben 1</div>
    <div class="block">Ik ben 2</div>
    <div class="block">Ik ben 3</div>
    <div class="block">Ik ben 4</div>
    <div class="block">Ik ben 5</div>
    <div class="block">Mij zie je niet</div>
    <div class="block">Mij zie je niet</div>
    <div class="block">Ik ben 6</div>
    <div class="block">Ik ben 7</div>
    <div class="block">Mij zie je niet</div>
    <div class="block">Mij zie je niet</div>
    <div class="block">Ik ben 8</div>
    <div class="block">Ik ben 9</div>
    <div class="block">Ik ben 10</div>
    <div class="block">Ik ben 11</div>    
    <div class="block">Ik ben 12</div>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
#wrapper {
    width:100%;
    height:800px;    
    position:relative;
    float:left;
    background:green;
}
#wrapper .block {
    width:25%;
    height:200px;
    background:orange;
    float:left;
    border:1px solid green;
}

#faux {
    width:50%;
    height:50%;
    position:absolute;
    left:25%;
    top:200px;    
    background:red;
}

JavaScript

$(function() {
    $("#wrapper").on("click", ".block", function() {
      $("#faux").html("Ik laat wat zien door de click op block nummer " +
                      $(this).text().substr($(this).text().length -1, 1));
    })
});