JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="puzzle pos">
    <div class="row cf">
        <div class="piece" id="p1"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p2"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p3"><img src="http://lorempixel.com/50/50/sports/" /></div>
    </div>
    <div class="row cf">
        <div class="piece" id="p4"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p5"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p6"><img src="http://lorempixel.com/50/50/sports/" /></div>
    </div>
    <div class="row cf">
        <div class="piece" id="p7"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p8"><img src="http://lorempixel.com/50/50/sports/" /></div>
        <div class="piece" id="p9"><img src="http://lorempixel.com/50/50/sports/" /></div>
    </div>
</div>
<div class="puzzle-cover pos">
    <div class="row cf">
        <div class="cover" id="c1"></div>
        <div class="cover" id="c2"></div>
        <div class="cover" id="c3"></div>
    </div>
    <div class="row cf">
        <div class="cover" id="c4"></div>
        <div class="cover" id="c5"></div>
        <div class="cover" id="c6"></div>
    </div>
    <div class="row cf">
        <div class="cover" id="c7"></div>
        <div class="cover" id="c8"></div>
        <div class="cover" id="c9"></div>
    </div>
</div>

CSS

.cover{
    width:50px;
    height:50px;
    background-color:red;
    float:left;
    margin:2px;
    transition:background 1s;
}
.piece{
    width:50px;
    height:50px;
    background-color:blue;
    float:left;
    margin:2px;
}
.transparent{
    background:transparent;
}
.red{
    background:red;
}
}
.row{
    display:block;
}
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
.pos{
    position:absolute;
    top:0;
    left:0;
}
}

JavaScript

$(".cover").on("click",function(){
    $(".cover").each(function(){
        $(".cover").addClass("red");
    });
    $(this).addClass("transparent").removeClass("red");
});