JSFiddle - React, Tailwind, and code Playground

HTML

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

CSS

body {
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
}

div {
  width: calc(50% - 16px);
  height: 120px;
  margin-bottom: 16px;
}

div:nth-child(4n+1), div:nth-child(4n) {
    background: red;
}

div:nth-child(4n-1), div:nth-child(4n-2) {
    background: blue;
}