JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<div id="box">
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
     <div>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
     <div>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</div>

CSS

*{
    margin:0 auto;
    padding:0;
}
#box{
    height:200px;
    width:200px;
    border:1px solid red;
}
div div{
    width:100%;
    height:32.855%;
}
span{
    display:inline-block;
    height:100%;
    width:32%;
    border:1px solid blue;
}
#box span:nth-child(2n+2){
     border:1px solid red;
    margin-left:-7px;
}
#box span:nth-child(2n+3){
     border:1px solid green;
    margin-left:-7px;
}