JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<div id="con">
    <ul id="child">
    </ul>    
<div>

CSS

#con, #child{
    width: 200px;
    height: 200px;
}

#con{
    height: 100px;
    overflow: hidden;
}

#child{
    width: 300px;
}

#child li{
    width: 20px;
    height: 20px;
    border: 1px solid #3BA8CC;
    float: left;
    margin-left: -1px;
    margin-bottom: -1px;
    list-style: none;
    box-sizing: border-box;
}

#child li.fs{
    margin-left: 0px !important;
}

#child li:first-child{
    margin-left: 0;
}

JavaScript

$(function(){
    var child = $('#child');
    var chwid = child.width();
    var chhei = child.height();
    var loop  = chwid / 20;
    var loop2 = chhei / 20;
    var li    = '<li></li>';
    var lid   = '<li class="fs"></li>';
    
    for(var i = 0; i < loop; i++){
        for(var j = 0; j < loop; j++){
            if(j == 0){
                child.append(lid);
            } else{
                child.append(li);
            }
        }
    }
    
});