JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="sidebar">
<a href="#" title="open here">
<div class="benDiv">
O<br />P<br />E<br />N
<div class="beDiv">

<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="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>

</div>
</div>
</a>

</div>

CSS

#sidebar {
top: 50px;
z-index: 3000;
position: fixed;
right: -385px;
}
#sidebar .benDiv {
margin:0px;
padding: 15px;
color: #fff;
font-weight: bold;
padding-right: 95px;
background-color: #5566FF;
border-radius: 15px;
-moz-border-radius: 15px;
text-shadow: 1px 2px #000;
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
}
#sidebar .beDiv {
float: right;
height: auto;
width: 285px;
padding-left: 15px;
}
#sidebar:hover {
right: -80px;
}