JSFiddle - React, Tailwind, and code Playground
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:800px;
height:800px;
position:relative;
float:left;
background:green;
}
#wrapper .block {
width:200px;
height:200px;
background:orange;
float:left;
border:1px solid green;
}
#faux {
width:400px;
height:400px;
position:absolute;
left:200px;
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));
})
});