JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<ul>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<ul>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>
<ul>
    <li>14</li>
    <li>15</li>
    <li>16</li>
</ul>

<ul>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul>
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
<ul>
    <li>14</li>
    <li>15</li>
    <li>16</li>
</ul>

<ul>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul>
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>

CSS

li{
    height: 10px;
    width: 32.33%;
    display: block;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
}

 ul:nth-child(4n), ul:nth-child(4n-1){
  background: gray;
  color: red;
  overflow:hidden;
}