JSFiddle - React, Tailwind, and code Playground

by Gautam

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

CSS

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eee;
}

ul {
  max-width: 400px;
  min-width: 400px;
}

ul > li {
  overflow: hidden;
  float: left;
  width: 30%;
  height: 50px;
  margin: 1%;
  background: orange;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul > li:nth-child(3n + 1):nth-last-child(3) {
  background: #727272;
}