JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Getting Started With CSS Transitions Part III -->
<!-- blog.kevinchisholm.com -->
<!-- Example # 1 -->

<!-- NOTE: this example will only work with WebKit browsers ! -->

<div>
    <span class="foo">Put your mouse over me</span>
    <span class="bar">Put your mouse over me <i>(and keep it over me!)</i></span> 
</div>

CSS

div {position:relative;width:400px;height:400px;background:#DCDCDC;font-size:18px;padding:10px;font-weight:bold;color:#fff;}
span{position:absolute;width:100px;height:150px;padding:5px;background:#B22222;}
span:hover{cursor:pointer;}
i{font-weight:normal;}

.foo{
	left:10px;
	top:10px;
	-webkit-transition-property: top, height, background-color;
	-webkit-transition-duration: 2s, 1s, 4s;
	-webkit-transition-delay: 0.5s, 0s, 1s;
}

.foo:hover {
	top: 50px;
	height: 300px;
	background: #000080;
}

.bar{
	right:10px;
	top:10px;
	-webkit-transition: all 1s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

.bar:hover {
	top: 50px;
	right: -100px;
	height: 300px;
	background: #006400;
}