JSFiddle - React, Tailwind, and code Playground

by lokdmt

HTML

<div class="list">
  <div class="list__item">1</div>
  <div class="list__item">2</div>
  <div class="list__item">3</div>
  <div class="list__item">4</div>
</div>

SCSS

.list{
  font-size: 0;
  &__item{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    font-size: 18px;
    color: #000;
    &:nth-of-type(3n+1){
      background-color: green;
    }
    &:nth-of-type(2),&:nth-of-type(3){
      background-color: yellow;
    }
  }
}