JSFiddle - React, Tailwind, and code Playground

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;
}
.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:hover {
	background-color: #ff9f19 !important;
}