JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">navigation</label>

CSS

#switch {
}
#switch + nav {
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

nav + label::before {
    content: 'Show ';
}

#switch:checked + nav:only-of-type + label::before {
    content: 'Hide ';
}