JSFiddle - React, Tailwind, and code Playground

by JeremiePat

HTML

<ol>
    <li><a href="#first">Go to first</a></li>
    <li><a href="#second">Go to second</a></li>
    <li><a href="#">Go back</a></li>
</ol>

<div id="first">1</div>
<div id="second">2</div>

CSS

div{
    position : relative;
    top : 0;
    display : inline-block;
    background-color : #000;
    color : #FFF;
    padding : 1em;
    
    -moz-transition : top 500ms linear, background-color 500ms linear;
    -webkit-transition : top 500ms linear, background-color 500ms linear;
    -o-transition : top 500ms linear, background-color 500ms linear;
    -ms-transition : top 500ms linear, background-color 500ms linear;
    transition : top 500ms linear, background-color 500ms linear;
}

div:target{
    top: -0.5em;
    
    background-color: #090;
}