JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class='choco'>
    <div class="row">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div> 
        <div class="b"></div>
    </div>
    <div class="row">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="row">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
</div>

CSS

.choco {
    margin: 10px;
    width: 720px;
    background-color: #b05f3c;
    overflow: hidden;
}
.b {
	width: 100px;
	height: 100px;
	float: left;
	background-color: #300;
	transition: background-color 0.55s;
    border: 10px outset #B05F3C;
    position: relative;
}
.row:nth-child(odd) .b:nth-child(2n),
.row:nth-child(even) .b:nth-child(2n+1) {
	background-color: #4D220E;
}
.b:first-child {
    margin-left: 0;
}
.b:after {
    content: '☺';
    font-size: 60px;
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 90px;
    text-align: center;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.7s;
}
.b:hover {
	background-color: #ff9f19 !important;
}
.b:hover:after {
    opacity: 1;
}