JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="container">
    <div class="col col-1">1</div>
    <div class="col col-2">2</div>
    <div class="col col-3">3</div>
</div>

CSS

.container{
	position: relative;
	height: 500px;
}
.col{
	position: absolute;
	height: 100%;
	text-align: center;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}
.col-1{
	left: 0;
	right: 66.666666666666666666666666666667%;
	background-color: #E3D5A8;
}
.col-2{
	left: 33.333333333333333333333333333333%;
	right: 33.333333333333333333333333333333%;
	background-color: #88ECC1;
}
.col-3{
	left: 66.666666666666666666666666666667%;
	right: 0;
	background-color: #B779D5;
}
.col:hover{
	left: 0;
	right: 0;
	z-index: 1;
}