JSFiddle - React, Tailwind, and code Playground

by witold

HTML

<div id="window">
    <div id="title_bar"><FONT size="4" COLOR="WHITE">Help out and Share! </font>
        <div id="button">-</div>
    </div>
    <div id="box">
    <div id="heading"><FONT size="4" COLOR="WHITE"><center>This site is only as good as we make it: </center></font></div>
    <div id="gap"><font color="#333333">.</font></div>
         <div class="bar rep"><fb:like layout="button_count" show_faces="false" font=""></fb:like></div>
         <div class="bar lrep"><a href="http://twitter.com/share" class="twitter-share-button" >Tweet</a></div>
         <div class="bar tossup"><g:plusone size="medium"></g:plusone></div>
         <div class="bar ldem"><su:badge layout="2"></su:badge></div>
         <div class="bar dem"><script src="" type="text/javascript"></script><a class="DiggThisButton DiggCompact"></a></div>
</div>

    </div>
</div>



 <script type="text/javascript">(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=437150472976137"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>            
 <script type="text/javascript">(function() { var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = ('https:' == document.location.protocol ? 'https:' : 'http') + '://platform.twitter.com/widgets.js'; s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(node, s); })();</script>
 <script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = ('https:' == document.location.protocol ? 'https:' : 'http') + '://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>  
 <script type="text/javascript">(function() { var li =...

CSS

#window{
    width:36%;
    border:solid 1px;
               position: center;
        margin: 0;
        padding: 0;
    left: 20%;  
bottom: 0;
}

#window{
           position: fixed;
bottom: 0;
  left: 20%;  
    margin: 0;
    padding: 0;
        width: 36%;
}    
    
#title_bar{
    font: 300 .9em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    background-color: #4F4F4F;
    height: 25px;
    width: 100%;
}
#button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
    text-align: center;
}
#box, .bar{
    font: 300 1em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    background-color: #333333
    text-align: left;
    position: center;
    margin: 0;
        padding: 0;
        height: 30px;
    left: 20%;  
    margin: 0;
    padding: 0;
        width: 100%;
}

    .bar {
    margin: 0;
    padding: 0;
        float: left;
        width: 20%; /* must never add up to more than 100% */
    }

    .rep {
        background-color: #333333;               
    }

    .lrep {
        background-color: #333333;
    }

    .tossup {
        background-color: #333333;
    }

    .ldem {
        background-color: #333333;
    }

    .dem {
        background-color: #333333;
    }

            #heading {
                position: center;
                background-color: #333333;
            }   
            #gap {
                position: center;
                background-color: #333333;
            }

JavaScript

$("#button").click(function(){
    if($(this).html() == "+"){
        $(this).html("-");
    }
    else{
        $(this).html("+");
    }
    $("#box").slideToggle();
});