JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="grid">
  <li class="grid-item is-0"><span>.is-0</span> Пункт</li>
  <li class="grid-item is-0"><span>.is-0</span> Пункт</li>
  <li class="grid-item is-0"><span>.is-0</span> Пункт</li>
  <li class="grid-item is-0"><span>.is-0</span> Пункт</li>

  <li class="grid-item is-1"><span>.is-1</span> Пункт (Первый и нужный)</li>
  <li class="grid-item is-1"><span>.is-1</span> Пункт</li>
  <li class="grid-item is-1"><span>.is-1</span> Пункт</li>
  <li class="grid-item is-1"><span>.is-1</span> Пункт</li>

  <li class="grid-item is-2"><span>.is-2</span> Пункт</li>
  <li class="grid-item is-2"><span>.is-2</span> Пункт</li>
  <li class="grid-item is-2"><span>.is-2</span> Пункт</li>
  <li class="grid-item is-2"><span>.is-2</span> Пункт</li>
</ul>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: monospace;
}

ul {
    list-style: none;
    padding: 15px 15px 15px 25px;
    font-weight: bold;
    max-width: 320px;
    margin: 0 auto;
}

ul li {
    margin: 0 0 10px 0;
    padding: 5px 5px;
    border-radius: 4px;
    position: relative;
}

ul li span {
  
}

/**/
ul li.is-0 {
  box-shadow: 0 0 0 1px green;
}

ul li.is-0 span {
    color: green;
}

ul li.is-1 {
  box-shadow: 0 0 0 1px orange;
}

ul li.is-1 span {
    color: orange;
}

ul li.is-2 {
  box-shadow: 0 0 0 1px blue;
}

ul li.is-2 span {
    color: blue;
}


/* первый матч поймать нельзя, но можно поймать все не первые: */

ul li.is-1 {
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 1px #000;
}

ul li.is-1 + li.is-1 {
  box-shadow: 0 0 0 1px orange;
  background: white;
  color: black;
}