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");
});