JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<div id="container"></div>

CSS

.square{

    border:2px solid black;
    width:50px;
    height:50px;
    margin:2px;
    -webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

}
.square2{

    border:2px solid black;
    width:50px;
    height:50px;
    margin:2px 0 0 -1px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

}
.square3{

    border:2px solid black;
    width:50px;
    height:50px;
    margin:2px 0 0 -3px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

}
.square:hover, .square2:hover, .square3:hover{

    /*border:3px solid black;*/
    margin:2px 0 0 3px;
    

}

JavaScript

var str = "";
for(i = 0; i<49; i++){
    
    if(i<16){
    
        str+=("<div class='square'>");
    
    }else if(i<33){

        str+=("<div class='square2'>");

    
    }else if(i<49){

        str+=("<div class='square3'>");

    }
    
}
for(i = 0; i<49; i++){
    str+=("</div>");
}
$("#container").append(str);