JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="be-slider" class="ben-gone">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="100%" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe></div>
</div>

<p id="b-close">
<a href="#" onclick="return false;" title="close here" style="color:red"!important>I want to close this!</a> X
</p>

</div>

CSS

.ben-gone {
top: 10%;
margin: 0;
height: auto;
width: 350px;
padding: 10px;
opacity: 0.75;
position: fixed;
background-color: #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#b-close {
color: #FFF;
padding: 10px 0 5px;
margin: 0 auto;
text-align: center;
font-weight: bold;
font-size: 15px;
}

JavaScript

$(document).ready(function () {
    $("#b-close").click(function () {
        $("#be-slider").animate({
            opacity: "0",
            left: "0"
        }, 1000).show();
    });
});