JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-2 pt-5"><h2>Archives</h2>                          
  <ul id="archive" class="list-group list-group-horizontal mx-auto">
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2022" ><a href="#" class="">2022</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2021"><a href="#" class="">2021</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2020"><a href="#" class="">2020</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2019"><a href="#" class="">2019</a></li>
  </ul></div>

JavaScript

$(function(){
 $("li[data-year='2021']>a").css("color","red");
});