JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Magic">
    
<div><div class="deep"><div class="deeper"></div></div></div>

CSS

div {
    margin-top: 20px;
    width: 300px;
    height: 300px;
    background-color: green;
}

.deep, .deeper {
    display: none;
}

.deep {
    height: 150px;
    width: 150px;
    background-color: yellow;
    position: relative;
}

.deeper {
    height: 70px;
    width: 70px;
    background-color: blue;
    position: absolute;
    top: -20px;
}

JavaScript

/*$('input').on('click', function() {
	$('div').toggle('slow');
})*/

/*$('input').on('click', function() {
	$('.deep').show(300, 'swing', function() {
        $('.deeper').show('fast', 'linear');
    });
});*/