JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<header class="title d-flex">
        <h1><a href="#reTop" class="hd"><span>a</span><span>p</span><span>p</span><span>l</span><span>e</span> <span>i</span><span>s</span></a></h1>

        <ul class="d-flex" id="list">
            <li><a href="#about">Introduce</a></li>
            <li><a href="#work">Portfolio</a></li>
            <li><a href="#contact">MatchUp</a></li>
        </ul>
    </header>

CSS

a{
    text-decoration: none;
    color: rgb(19, 154, 172);
}

h1 a{
    color: rgb(72, 130, 202);
}

h1 a:nth-child(1):hover{
    color: rgb(248, 199, 241);
}
h1 a:hover span:nth-child(1) {
    color: red;
}
h1 a:hover span:nth-child(2) {
    color: orange;
}
h1 a:hover span:nth-child(3) {
    color: yellow;
}
h1 a:hover span:nth-child(4) {
    color: green;
}
h1 a:hover span:nth-child(5) {
    color: blue;
}
h1 a:hover span:nth-child(6) {
    color: navy;
}
h1 a:hover span:nth-child(7) {
    color: purple;
}