JSFiddle - React, Tailwind, and code Playground

HTML

<div class="none">
	<span class= "minus7"><h3>Hello  Internet</h3><p>Explorer 8 and earlier versions do not support the transform property.</p></span>
    <a class = "infox" href="#">x</a>
</div>

CSS

body {
    overflow:hidden;
}

div {
position: absolute;
	bottom: -20px;
    left: 20px;
    width: 300px;
    height: 200px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
    
    -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}
span {
	position: absolute;
    /* Rotate div */
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}

a {
position: absolute;
bottom: 0px;
width: 50px;
height: 50px;
background-color: orange;
}

.bezpozadi {
background-color:transparent;
}

.pohyb {
	height: 0px;
}

JavaScript

$( ".infox" ).click(function() {
  $( ".none" ).toggleClass("pohyb");
});