JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parrent">
    <div class="child">text 1</div>
    <div class="child">text 2</div>
    <div class="child">text 3</div>
    <div class="child">text 4</div>
    <div class="child">text 5</div>
    <div class="child">text 6</div>
    <div class="child">text 7</div>
</div>

CSS

.parrent {width:100%}
.parrent div {width: 30%;float:left;border: 1px solid black;}
.parrent div:nth-child(3n+2) {width: 30%;float:left;border: 1px solid yellow;}
.parrent div:nth-child(3n) {width: 30%;float:left;border: 1px solid red;}