JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="class_ul">
    
<li class="class_li"><span class="class_span_1"> Текст </span><a href="#"> url </a><span class="class_span_2"> Текст </span></li>

<li class="class_li"><span class="class_span_1"> Текст </span><a href="#"> url </a><span class="class_span_2"> Текст </span></li>

<li class="class_li"><span class="class_span_1"> Текст </span><a href="#"> url </a><span class="class_span_2"> Текст </span></li>
    
</ul>

CSS

.class_li {color: red;}
.class_span_1 {color: blue;}
.class_span_2 {color: orange;}
.class_li a {color: pink;}

.class_li.hover {color: black;}
.class_span_1.hover {color: black;}
.class_span_2.hover {color: black;}
.class_li.hover a {color: black;}