JSFiddle - React, Tailwind, and code Playground

by Goran Stoyanov

HTML

<div id="artistlistdesktop">
    <ul>
        <li>
            <a href="https://stackoverflow.com" data-hex="#ff0000">Link</a>
        </li>
    </ul>
</div>

CSS

#artistlistdesktop li > a {
display: block;
text-decoration: none;
font-family: Arial Black, Arial, Helvetica, sans-serif;
color: rgba(146,146,146,0.5);
font-weight: bolder;
line-height: 35px;
font-size: 53px;
letter-spacing: -5px;
padding: 0;
margin: 0;
}

JavaScript

$(document).ready(function(){
	$('#artistlistdesktop ul li a').hover(
  	function() {
      $(this).children('#artist-image').toggleClass('active');
      $(this).css("color", $(this).data("hex"));
   	},
   	function() {
    	$(this).css("color", "rgba(146,146,146,0.5)");
   	});
});