JSFiddle - React, Tailwind, and code Playground

by irina675

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
<div class="tab">Second Panel</div>

CSS

#demo {
    padding: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
}
#demo.hovered {
	backgound-color: #000;
}
.tab {
    margin-top: 10px;
    padding: 50px;
    opacity: 0.5;
    background-color: #876;
}

JavaScript

$(document).ready(function () {
	$('#demo').mouseleave(function(event) {
		$('.tab').stop().animate({
			opacity : '0.5',
			marginTop: '10px'
		}, 600, function() {		//animation complete
			$('#demo').addClass('hovered');
		});
    });
	$('#demo').mouseover(function(event) {
		$('.tab').stop().animate({
			opacity : '1',
			marginTop: '0px'
		}, 300, function() {		//animation complete
			$('#demo').removeClass('hovered');
		});
    });
});