JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<ul>
  <li></li>
  <li></li>
  <li></li><li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SCSS

ul {
  display: flex;
  padding: 30px;
  counter-reset: count;

  li {

    width: 30px;
    height: 30px;
    border: 1px solid black;
    margin-right: 2px;
    
    &:before {
      counter-increment: count;
          content: counter(count);
    }
  }
}


li:nth-child(-n + 5) {
  background: red;
}