JSFiddle - React, Tailwind, and code Playground

HTML

<a class="none" href="#A">A</a>
<a class="some" href="#B">B</a>
<a class="some" href="#C">C</a>
<a class="some" href="#D">D</a>
<a class="none" href="#E">E</a>
<a class="some" href="#F">F</a>

<dl class="glossary">
    <a name="A">
    <a name="B">
    <a name="Bobcat">
    <dt>Bobcat</dt>
        <dd>A medium-sized, furry mammal that can eat children.</dd>
    <a name="C">
    <a name="Cat">
    <dt>Cat</dt>
        <dd>A small, furry mammal that meows.</dd>
    <a name="D">
    <a name="Dog">
    <dt>Dog</dt>
        <dd>A small, furry mammal that barks.</dd>
    <a name="E">
    <a name="F">
    <a name="Fish">
    <dt>Fish</dt>
        <dd>A scaly aquatic animal that swims in water.</dd>

</dl>

CSS

a.none {
    color: #CCCEE;
    text-decoration: none;
}
a.some {
    color: #AAAAFF
    text-decoration: underline;
}