JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class='panel'>

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="332" 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>
<a class='trigger' href=''>Chat</a>

CSS

.panel {
left:0;
top:20px;
height:auto;
width:auto;
display:none;
position:fixed;
background:#000;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
padding:15px 15px 15px 95px;
}

a.trigger {
left:0;
top:50px;
color:#fff;
font-size:16px;
font-weight:700;
position:fixed;
display:block;
text-decoration:none;
padding:10px 35px 10px 10px;
font-family:verdana, helvetica, arial, sans-serif;
background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
border:1px solid #444;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
}

a.active.trigger {
background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat;
}

JavaScript

$(document).ready(function () {
    $(".trigger").click(function () {
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});