JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ul>
    <li>cell 1</li>
    <li>cell 2</li>
    <li>cell 3</li>
    <li>cell 4</li>
    <li>cell 5</li>
    <li>cell 6</li>
    <li>cell 7</li>
    <li>cell 8</li>
    <li>cell 9</li>
    <li>cell 10</li>
    <li>cell 11</li>
    <li>cell 12</li>
    <li>cell 13</li>
    <li>cell 14</li>
    <li>cell 15</li>
    <li>cell 16</li>
    <li>cell 17</li>
    <li>cell 18</li>
    <li>cell 19</li>
    <li>cell 20</li>
    <li>cell 21</li>
    <li>cell 22</li>
    <li>cell 23</li>
    <li>cell 24</li>
    <li>cell 25</li>
    <li>cell 26</li>
    <li>cell 27</li>
    <li>cell 28</li>
    <li>cell 29</li>
    <li>cell 30</li>
    <li>cell 31</li>
    <li>cell 32</li>
</ul>

SCSS

* {
    box-sizing: border-box;
}

body {
    padding: 10% 5%;
}

ul {
    display: flex;
    flex-wrap: wrap;
    
    > li {
        padding: 10px;
        width: 50%;
        
        border: 1px solid #999;
        border-radius: 2px;
    }
}