JSFiddle - React, Tailwind, and code Playground

by Ikhsan bahar

HTML

<div id="result"></div>

CSS

#table-data {
    border: 1px solid #e3e3e3;
    background-color: #f2f2f2;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
#table-data td, #table-data th {
    padding: 5px;
    color: #333;
}
#table-data thead {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: .2em 0 .2em .5em;
    text-align: left;
    color: #4B4B4B;
    background-color: #C8C8C8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
    background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
    border-bottom: solid 1px #999;
    cursor: default;
}
#table-data th {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 20px;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    text-shadow: white 1px 1px 1px;
    cursor: default;
}
#table-data td {
    line-height: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: lighter;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    cursor: default;
    text-shadow: white 1px 1px 1px;
}
#table-data td:hover {
    background-color: #fff;
}

JavaScript

function getlargest(data){
    var param = 0;
    for(var i = 0; i < data.length; i++){
        if(param < data[i]){
            param = data[i];
        }
    }
    return param;
}
function dechex(number){
    if (number < 0){
        number = 0xFFFFFFFF + number + 1;
    }
    return "#"+number.toString(16).toUpperCase();
}
function getwidth(data){
    var width = [];
    var getlarge = getlargest(data);
    
    for(var i = 0; i < data.length; i++){
        var percent = (data[i]/getlarge) * 100;
        var widths = (percent/100) * maxwidth;
        
        width[i] = widths;
    }
    
    return width;
}
function getcounterwidth(data){
    var counter = [];
    var widths = getwidth(data);
    for(var i = 0; i < data.length; i++){
        var counters = (data[i] / widths[i]);
        counter[i] = counters;
    }
    return counter;
}
function renderdiv(data,divid){
    var result = 
        "<table id=\"table-data\" style=\"width: "+(maxwidth + 20)+"px\">"+
        "<thead>"+
        "<th>Graph</th>"+
        "</thead>";
    for(var i = 0; i < data.length; i++){
        var colors = (typeof(barcolor[i]) === "undefined") ? dechex((Math.floor(Math.random() * 16776985) + 1)) : barcolor[i];
        result += 
        "<tr>"+
        "<td>"+
        "<div style=\"background-color: "+colors+"; width: 0px; height: 50px; box-shadow: 10px 10px 5px #888888;\"><font>0</font></div>\n"+
        "</td>"+
        "</tr>";
    }
    result+= "</table>";
    divid.innerHTML = result;
}
function normallook(divid){
    /* 
    source style 
    http://jsfiddle.net/thirtydot/JxEfs/1/ 
    http://stackoverflow.com/questions/15507941/position-after-transform-in-css
    http://stackoverflow.com/questions/7668703/how-do-you-align-270deg-rotated-text-to-top-left
    */
    var setstyle = 
        "position: absolute;"+
        "top: 0;"+
        "right: 100%;"+
        "-webkit-transform: rotate(270deg);"+
        "-webkit-transform-origin: right top;"+
        "-moz-transform:...