JSFiddle - React, Tailwind, and code Playground

by nabeezy

HTML

<div class="">
    <span class="showsInTheSea">fish</span>
    <span class="showsOnLand">monkey</span>
</div>

<button id="sea">in the sea</button>
<button id="land">on land</button>

CSS

body{
    color:white;
}
.showsOnLand{
    background-color:green;
    display:inherit;
}

.showsInTheSea{
    background-color:blue;
    display:none;
}

.inTheSea .showsOnLand{
    display:none;
}

.inTheSea .showsInTheSea{
    display:inherit;
}

JavaScript

$("#sea").click(function(){
    $("div").addClass("inTheSea");
});
$("#land").click(function(){
    $("div").removeClass("inTheSea");
});