JSFiddle - React, Tailwind, and code Playground

by brennan

CSS

.SB_overlay_container{
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    overflow-y:auto;
    overflow-x:hidden;
    font-family:helvetica, sans-serif;
}
.SB_overlay{
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    z-index:100;
    background-color:rgba(0,0,0,0.4);
}
.SB_top_votes_widget{
    position:absolute;
    top:10px;left:50%;
    margin-left:-250px;
    width:500px;
    background-color:rgba(0,0,0,0.8);
    padding:5px;
    border-radius:5px;
    z-index:101;
}
.SB_widget_header{
    height:25px;
    padding:3px 8px 3px 8px;
    background-color:#123456;
    border-top:1px solid #345678;
    border-bottom: 1px solid #001234;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    font-size:16px;
    line-height:25px;
    color:#ffffff;
}
    .SB_widget_header .SB_widget_add{
        display:inline-block;
        float:right;
        color:#ffffff;
        padding:3px 5px;
        margin:2px 0 0 0;
        font-size:14px;
        line-height:14px;
        border-top:1px solid rgba(255,255,255,0.6);
        border-bottom:1px solid rgba(0,0,0,0.6);
        background-color:rgba(255,255,255,0.4);
        text-decoration:none;
        border-radius:3px;
    }
.SB_widget_body{
    padding:10px;
    border-top:1px solid #f4f4f4;
    border-bottom:1px solid #222222;
    background-color:#eeeeee;
    clear:both;
}
.SB_widget_footer{
    height:3px;
    clear:both;
    background-color:#123456;
    border-top:1px solid #345678;
    border-bottom: 1px solid #001234;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

JavaScript

(function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = document.location.protocol+"//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        document.documentElement.childNodes[0].appendChild(script)
    }
})(window, document, "1.3", function($, jquery_loaded) {
    var SB_script = document.createElement("script");
    var loaded = false;
    SB_script.type = "text/javascript";
    SB_script.src = document.location.protocol+"//app.soapboxhq.com/lab/soapbox.js";
    SB_script.onload = SB_script.onreadystatechange = function() {
        if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            setTemplates();
            buildWidget();
        }
    };
    document.documentElement.childNodes[0].appendChild(SB_script)
    
    function buildWidget(){
        var button = buildButton();
        
        $('body').append(button);
        
        $('.SB_top_votes_button').live({
            click: function(){
                
                $('.SB_overlay_container').remove();
                var overlay = buildOverlay(); 
                $('body').append(overlay);
                SoapBox.loadIdeas({
                    list_type: 'top',
                    page_start: 0
                },{
                    success: function(html, ideas){
                        $('.SB_loaded_ideas').html(html);
                    },
                    error: function (){}
                });
            }
        });
     ...