JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="container">
    <span></span>
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span><br>
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span><br>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span><br>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span><br>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span>    
    <span></span>
</div>

CSS

div {
    width: 350px;
    height: 350px;
    margin: 0;
    line-height: 0;
}

span {
    position: relative;
    display: table-cell;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 70px;
    height: 70px;
}

span:after {
    content: '';
    background: radial-gradient(at center, blue 45%, #fff 45%);
    display: block;
    width: 70p;
    height: 70px;
    position: relative;
    z-index: 1;
}

div span:nth-of-type(1), span:nth-of-type(2), span:nth-of-type(3), span:nth-of-type(4), span:nth-of-type(5) {
     border-top: 1px solid #000;
}
div span:nth-of-type(1), span:nth-of-type(6), span:nth-of-type(11), span:nth-of-type(16), span:nth-of-type(21) {
     border-left: 1px solid #000;
}

span:hover:after {
    background: radial-gradient(at center, #000 45%, #FFBF00 45%);
}