JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<div id="outer">
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
<span id="5"></span>
<span id="6"></span>
<span id="7"></span>
</div>

CSS

span:target { background-color: orange; }

span {
    display: inline-block; 
    width: 100px; 
    height: 100px;
    -webkit-transition: background-color 800ms ease-in;
    -o-transition: background-color 800ms ease-in;
    -moz-transition: background-color 800ms ease-in;
    -ms-transition: background-color 800ms ease-in;
    transition: background-color 800ms ease-in;
    background-color: green; 
}

JavaScript

window.setTimeout(function () {
    window.location.hash = "";
    history.replaceState("", document.title, window.location.pathname);
}, 3000);