JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <a href="#one">
        <div id="one" class="one"></div>
    </a>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
</div>

CSS

div.wrapper {
    border: thin black solid;
    width: 205px;
    overflow:hidden;
    height:40px;
}
div.one {
    display: inline-block;
    width:40px;
    height:40px;
    background: red;
    transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div.div {
    display: inline-block;
    width:40px;
    height:40px;
    margin-left:10px;
    background: blue;
}
div.one:target {
    width:200px;
}