JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#walking" id="walking" class="link-active"><p>Dog Walking</p></a>
<a href="#grooming" id="grooming"><p>Dog Grooming</p></a>

<div class="walk"></div>
<div class="groom"></div>

<p>When dog grooming is clicked I want the blue box to fade out and black one to fade in. I also want 'link-active' to be removed from dog walking and applied to dog grooming</p>

CSS

a{float:left; border:1px solid #000; margin:5px; padding:5px; color:#000;}
.link-active{background:#0099ff;}
.walk, .groom{float:left; border:1px solid #000; margin:5px; width:75px; height:75px;}
.walk{background:#0099ff;}
.groom{background:#000; display:none;}