JSFiddle - React, Tailwind, and code Playground

HTML

<div class="smallblock-b blueblock"><a href="#">text</a></div>
    <label>
<input type="checkbox"></input>
    <div class="bigblock blueblock"><a href="#">text text text text text text text text text text text text text text text text text text text text text text text</a></div>
</label>
    <div class="smallblock blueblock"><a href="#">text</a></div>  
    <div class="smallblock blueblock"><a href="#">text</a></div>  
    <div class="smallblock greenblock"><a href="#">text</a></div>
    <div class="smallblock blueblock"><a href="#">text</a></div> 
    <label>
    <input type="checkbox"></input>
    <div class="bigblock greenblock"><a href="#">text</a></div>
</label>
    <div class="smallblock blueblock"><a href="#">text</a></div> 
    <div class="smallblock blueblock"><a href="#">text</a></div>

CSS

.smallblock {
width: 100px;
height: 100px;
margin: 10px;
float: left;
z-index:1;
}
.smallblock-b {
width: 220px;
height: 100px;
margin: 10px;
float: left;
}

.bigblock {
width: 220px;
height: 220px;
margin: 10px;
float: left;
z-index:0;
}
.blueblock {background:rgb(87, 191, 234);}
.orangeblock {background:rgb(214, 99, 39);}
.greenblock {background:rgb(152, 202, 70);}
.whiteblock {background:#fff;}


div{
    display:inline-block;
    width:50px;
    height:50px;
    background:#ccc;
    border-radius:5px;
    transition:.5s;
}
input{
    display:none;
}
input:checked ~ div{
    background:black;
    width:100px;
    height:100px;
    background:#555;
}