JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<nav>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    <a href="#four">Four</a>
      -- 
    <a href="#none">None</a>
</nav>
<section>
    <p id="one">one</p> 
    <p id="two">two</p>
    <p id="three">Number Three</p>
    <p id="four">Number Four</p> 
    <div id="image">
        <img src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcRjxLtwg4AZ8xb54D6ijt-HWYkKrccOddUqs2uvReaPhS-2tBrxLQ"/>
    </div> 
</section>

CSS

p {
    color:#CCC;
    text-align:center;
    opacity:0;
    -webkit-transition: opacity 0.25s ease-in-out;
}

p:target {
    color:#000;
    opacity:1;
}

section {position:relative; width:250px;}

#image {
    position:absolute; top:0px; left:0px; right:0px; z-index:2;
    opacity:1;
    -webkit-transition: opacity 0.25s ease-in-out;
}
#image img {width:100%; height:auto;}

p:target ~ #image{
    opacity:0;
}