JSFiddle - React, Tailwind, and code Playground
HTML
<div class="infoBlock infoBlockLeftBlack rsABlock in" data-fade-effect="" data-move-offset="100" data-move-effect="top" data-speed="200">
<a href="#" class="infox">X</a>
<div class="minus7">
<h4>Nice picture</h4>
<p>This is the info about it. It´s nice, short and easy to read.</p>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden
}
.infoBlock {
position: absolute;
/*top: 30px;*/
bottom: 0px;
right: 30px;
left: auto;
max-width: 25%;
padding-bottom: 0;
background: #FFF;
background: rgba(255, 255, 255, 0.8);
overflow: hidden;
padding: 20px;
width: 220px;
min-height: 14px;
transition: background .75s;
bottom: -20px;
-ms-transform: rotate(10deg);
-webkit-transform-origin: left bottom;
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg) !important;
}
.infoBlockLeftBlack {
color: #FFF;
background: #000;
background: rgba(0, 0, 0, 0.75);
left: 75px;
right: auto;
}
.infoBlock h4 {
font-size: 20px;
line-height: 1.2;
margin: 0;
padding-bottom: 13px;
}
.infoBlock p {
font-size: 14px;
margin: 0;
}
.infoBlock a {
color: #FFF;
text-decoration: underline;
text-align: center;
padding-top: 4px;
display: inline-block;
min-height: 90px;
}
.infoBlock.out {
background: transparent;
}
.minus7 {
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Chrome, Safari, Opera */
transform: rotate(-10deg);
margin-left: 0.5em;
margin-top: 50px;
margin-bottom: 100px;
}
.infox {
position: absolute;
bottom: -40px;
width: 50px;
height: 90px;
background-color: grey;
left: 0px;
z-index: 50;
}
JavaScript
$(document).on("click", ".infox", function() {
$('.infoBlock').toggleClass('in out');
$(".minus7").slideToggle();
});