JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="finder">
<div class="block1">
<div id="One">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
<div class="block1">
<div id="two">Two</div>
</div>
<div class="block1">
<div id="three">Three</div>
</div>
<div class="block1">
<div id="four">Four</div>
</div>
<div class="block1">
<div id="five">Five</div>
</div>
<div class="block1">
<div id="six">Six</div>
</div>
<div class="block1">
<div id="seven">Seven</div>
</div>
<div class="block1">
<div id="eight">Eight</div>
</div>
<div class="block1">
<div id="nine">Nine</div>
</div>
<div class="block1">
<div id="ten">Ten</div>
</div>
<div class="block1">
<div id="eleven">Eleven</div>
</div>
<div class="block1">
<div id="twelve">Twelve</div>
</div>
</div>
<div class="button">
<div id="startButton">
<button>Start</button>
</div>
</div>
</div>
CSS
#container {
float: left;
min-height: 300px;
width: 100%;
background:#E6EEEE;
}
.finder {
background: none repeat scroll 0 0 grey;
border: 1px solid darkcyan;
float: left;
min-height: 300px;
width: 46%;
}
.block1 {
background: none repeat scroll 0 0 #FEFEFE;
border: 1px solid;
cursor: pointer;
margin: 11px;
min-height: 100px;
width: 20%;
float:left;
}
#startButton {
margin-top: 336px;
}
JavaScript
$(function () {
$("input[type=submit], button")
.button()
.click(function (event) {
event.preventDefault();
});
$("#one").css('display', 'block');
$("#two").css('display', 'none');
$("#three").css('display', 'none');
$("#four").css('display', 'none');
$(".block1").click(function () {
$(this).text("New value")
});
});