JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="app">App1</li>
<li class="app">App2</li>
<li class="app">App3</li>
<li class="app">App4</li>
</ul>
<div id="newApp">Big App Interface</div>
CSS
.app {
width: 32px;
height: 32px;
display: inline-block;
background-color: blue;
padding: 10px;
}
#newApp {
height: 256px;
width: 256px;
background-color: red;
display: none;
}
JavaScript
$('.app').fadeOut(1000, function() {
$('#newApp').fadeIn(1000);
});