JSFiddle - React, Tailwind, and code Playground

HTML

<div class="steps">
<ul>
<li>Apply an Email To Your Nation</li>
<li>Apply To the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span> With That Email</li>
<li>Join the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span></li>
</div>

CSS

.wa a{
color: rgb(68, 118, 67);
}

.steps {
width:400px;
margin:0 auto;
text-align:left;
line-height: 200%;
}

.steps a:hover {
text-decoration: underline;
}
	
.steps li:not(a):hover{
cursor: pointer;
color: rgb(66, 81, 95);
}