JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

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

<ul class="ul2">
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul class="ul2">
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul class="ul2">
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
<ul class="ul2">
    <li>14</li>
    <li>15</li>
    <li>16</li>
</ul>

<ul class="ul2">
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul class="ul2">
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul class="ul2">
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>

CSS

ul{
  overflow:hidden;
}
li{
    height: 20px;
    width: 32.33%;
    display: block;
    float: left;
    
}

.ul2:nth-child(4n) li, .ul2:nth-child(4n-1) li{
  background: gray;
  color: white;
}