JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headwrap">
<ul>
    <li><a href="dev">Dev</a></li>
    <li><a href="music">Music</a></li>
    <li><a href="opinion">Opinion</a></li>
    <li><a href="work">Work</a></li>
</ul>
</div>

CSS

div#headwrap ul li a[href*="dev"] {background: #034769}
div#headwrap ul li a[href*="music"] {background: #A61300}
div#headwrap ul li a[href*="opinion"] {background: #b2d81e}
div#headwrap ul li a[href*="work"] {background: #ffc340}