JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <div id="twitterPanel">
        Twitter Data Goes Here
    </div>
    <p class="slide">
        <a href="#" class="btnSlide"></a>
    </p>
</html>

CSS

.slide
{
 margin: 0;
 padding: 0;
 border-top: solid 4px #48c4d2;
 background: url(http://cdn.jquery4u.com/wp-content/themes/jquery4u/images/socialize-icons/twitter.png) no-repeat center top;
}

p
{
 width: 
 display: block;
 -webkit-margin-before: 1em;
 -webkit-margin-after: 1em;
 -webkit-margin-start: 0px;
 -webkit-margin-end: 0px; 
}

body 
{
 margin: 0 auto;
 padding: 0;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.btnSlide
{
 background-repeat: no-repeat;
 text-align: center;
 width: 110px;
 height: 31px;
 padding: 10px 10px 0 0;
 margin: 0 auto;
 display: block;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 color: white;
 text-decoration: none; 
}
.active
{
 background-position: right 12px;   
}
#twitterPanel
{
 background: #48c4d2;
 height: 200px;
 display: none;
}
a:focus
{
 outline: none;   
}

JavaScript

$(function () {
    $(".btnSlide").click(function() {
        $("#twitterPanel").slideToggle("slow");
        $(this).toggleClass("active");
    });        
});