JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="wrap">
    
    <div id="one" class="space"></div>
    <div id="two" class="space"></div>
    <div id="three" class="space"></div>
    <div id="four" class="space"></div>
    <div id="five" class="space"></div>
    <div id="six" class="space"></div>
    <div id="seven" class="space"></div>
    <div id="eight" class="space"></div>
    <div id="nine" class="space"></div>
    
</div>

CSS

.red {
    background-color:red;
}
.blue {
    background-color:blue;
}
.space{
    outline:1px solid black;
    height:40px;
    width:40px;
    float:left;
    
}
#wrap{

    height:120px;
    width:120px;
    overflow:hidden;
    margin:20px 0 0 20px;
    
}

JavaScript

$('div.space').click((function() {
    var i = 0;
    var colors = ['blue', 'red'];
    return function() {
        $(this).addClass(colors[i = ++i % 2]).unbind('click');
    };
})());