JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p></p>
<div></div>

CSS

p {
	height: 10px;
	background: black;
}

div {
	display: none;
	background: red;
	height: 0;
	transition: all 1s;
}

div.is-show {
	display: block;
}

div.is-animate {
	height: 200px;
}

Babel + JSX

$('p').on('mouseenter', (e) => {
	$(e.target).next().addClass('is-show');
	
	setTimeout(() => {
		$(e.target).next().addClass('is-animate');
	}, 100);
});

$('p').on('mouseleave', (e) => {
	$(e.target).next().removeClass('is-animate');
	
	setTimeout(() => {
		$(e.target).next().addClass('is-show');
	}, 250);
});