JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class="SlideBox"><div>

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="100%" 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="99%" 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>

</div>
</div>

CSS

.SlideBox {
top: 15%;
right: -250px;
float: right;
cursor: pointer;
position: fixed;
display: block;
height: 270px;
width: 245px;
z-index: 99999;
background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;
padding: 0 5px 0 45px;
}
.SlideBox div {
background-color: #555;
padding: 5px;
border: none;
position: relative;
display: block;
}

JavaScript

//<![CDATA[
$(document).ready(function () {
    $(".SlideBox").hover(function () {
        $(this).stop().animate({
            right: "0"
        });
    }, function () {
        $(this).stop().animate({
            right: "-250"
        });
    }, 500);
});
//]]>