JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slidingDiv">Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
</div>
<a href="#" class="show_hide">Show/hide</a>
CSS
.slidingDiv {
height:500px;
width:500px;
background-color: #99CCFF;
transform: rotate(45deg);
margin-left:-300px;
bottom:0;
}
.show_hide {
display:none;
}
JavaScript
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
});