JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>

<a href="#first">first</a>
<a href="#second">second</a>
<a href="#third">third</a>

CSS

div{
    width:200px;
    height:200px;
    margin:0;
    background-color:red;
    display:inline-block;
    left:0;
    top:0;
    right:0;
    bottom:0;
    float:left;
    transition:width 1s, height 1s, background-color 1s;
}

div:target{
    background-color:blue;
    width:500px;
    height:500px;
    position:absolute;
    margin:auto;
}
div:target+div:before{
    content:"";
    width:200px;
    height:200px;
    display:inline-block;
    background-color:white;
}
div:target+div{
    width:400px;
}