JSFiddle - React, Tailwind, and code Playground

by Andy Kuds

HTML

<a href="#hello">Hello</a> | <a href="#goodbye">Goodbye</a>

<div id="content">
    <div id="hello">Hello</div>
</div>
<div id="content">
    <div id="goodbye">Goodbye</div>
</div>

CSS

body {
 margin-left: 5px;   
}

#content {
    background: #ccc;
    width: 100%;
    height: 102px;
    position: relative;
    overflow: hidden;
}
#content div {
	position: absolute;
	overflow: hidden;
	background: lightblue;
	width: 0px;
	height: 100px;
	border: 1px solid gray;
	border-width: 0px;
	left: 100%;
	-moz-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
	-webkit-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
}
#content > div:target {
	left: 0;
	width: 100%;
	border: 1px solid gray;
	-moz-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
	-webkit-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
}