JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<script>$(document).ready(function(){
scriptsDropup.create('View More Scripts', '#BDE052');    
});</script>

JavaScript

var scriptsDropup = scriptsDropup || (function(){

    var scripts = [
        ['Sparky.js', 'http://sparkyjs.com'],
        ['Slow.js', 'http://lab.jakiestfu.com/slowjs/']
    ];

    function appendStyles(el){
        var color = el.dataset['hovercolor'] ? el.dataset['hovercolor'] : '#08C',
            css = '#scripts{position:relative;}.scripts-list{margin:0;padding:0;display:none;position:absolute;top:0px;right:-100%;list-style-type:none;border:1px solid rgba(0,0,0,0.2);background:#fefefe;padding-top:5px;padding-bottom:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);}.scripts-list a{font-family:HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;text-decoration:none;display:block;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap;padding:3px 20px;}.scripts-list a:hover{background:'+color+';}',
            head = document.getElementsByTagName('head')[0],
            style = document.createElement('style');
        style.type = 'text/css';
        if(style.styleSheet){
            style.styleSheet.cssText = css;
        }else{
            style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);
    }
    
    function toggleList(e){
        e.stopPropagation();
        var l = document.getElementById('scripts-list');
        if(l.style.display=="block"){
            l.style.display="none";
        } else {
            l.style.display="block";
        }
    }
    
    function buildMenu(el){
        var i, data='', ul=document.createElement('ul');
        ul.className="scripts-list";
        ul.id = 'scripts-list';
        
        for(i in scripts){
            data += '<li><a href="'+scripts[i][1]+'" target="_blank">'+scripts[i][0]+'</a></li>';
        }
        ul.innerHTML = data;
        el.style.position = 'relative';
        el.appendChild(ul);
       ...