JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div class="item">item 1<br>more text</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
        <div class="item">item 4</div>
        <div class="item">item 5</div>
        <div class="item">item 6</div>
        <div class="item">item 7</div>
        <div class="item">item 8</div>
    </div>

CSS

.item {
        width: 25%;
        margin-top: 5px;
        float: left;
        background-color: red;
    }

    @media (max-width: 640px){
        .item {
            width: 33%;
        }
    }