JSFiddle - React, Tailwind, and code Playground

by coderslay

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; user-scalable=no" />
    <script> 
(function($, undefined ) {
$.widget( "mobile.tabs", $.mobile.widget, {
    options: {
        iconpos: 'top',
        grid: null,
        load: function(event, ui) { },
        beforeTabHide: function(event, ui) { },
        beforeTabShow: function(event, ui) { },
        afterTabShow:  function(event, ui) { }
    },
    _create: function(){
        var
            $this = this,
            $tabs = this.element,
            $navbtns = $tabs.find("a"),
            iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;
        var $content = $tabs.closest('div[data-role="page"]').find('div[data-role="content"]');

        $tabs
            .addClass('ui-navbar')
            .attr("role","navigation")
            .find("ul")
                .grid({grid: this.options.grid });

        if( !iconpos ){ 
            $tabs.addClass("ui-navbar-noicons");
        }

        $navbtns
            .buttonMarkup({
                corners: false,
                shadow:  false,
                iconpos: iconpos
            })
            .removeClass('ui-link');

        // Set up the direct children of the page as the tab content, hide them
        $content.children().addClass('ui-tabs-content');
        
        // Now show the one that's active
        if( $navbtns.filter('.ui-btn-active').length == 0 )
            $navbtns.first().addClass('ui-btn-active');
        $content.children('#' +...

CSS

.ui-tabs-content {
  display: none;
  margin-top: -15px;
}
.ui-tabs-content-active {
  display: block;
}
.ui-btn-active {
color: white;
background-color : white;
background: #FF9900;
}

JavaScript

$(document).ready(function(){
        function drawSeriesHook(plot, canvascontext, series) {
            var ctx = canvascontext,
                plotOffset = plot.offset(),
                labelText = 'VALUES', // customise this text, maybe to series.label
                points = series.datapoints.points,
                ps = series.datapoints.pointsize,
                xaxis = series.xaxis,
                yaxis = series.yaxis,
                textWidth, textHeight, textX, textY;
            // only draw label for top yellow series
            if (series.last) {
                ctx.save();
                ctx.translate(plotOffset.left, plotOffset.top);

                ctx.lineWidth = series.bars.lineWidth;
                ctx.fillStyle = '#000'; // customise the colour here
                for (var i = 0; i < points.length; i += ps) {
                    if (points[i] == null) continue;

                    labelText = series.xaxis.ticks[i / ps].label;
                    if(labelText === 'DATA1')
                        {
                        labelText = 'DATA1V';
                        }
                    else if (labelText === 'DATA2')
                        {
                        labelText = 'DATA2V';
                        }
                    else if (labelText === 'DATA3')
                        {
                        labelText = 'DATA3V';
                        }
                    else if (labelText === 'DATA4')
                        {
                        labelText = 'DATA4V';
                        }
                    textWidth = ctx.measureText(labelText).width; // measure how wide the label will be
                    textHeight = parseInt(ctx.font); // extract the font size from the context.font string
                    textX = xaxis.p2c(points[i] + series.bars.barWidth / 2) - textWidth / 2 ;
                    textY = yaxis.p2c(points[i + 1]) - textHeight / 2;
                    ctx.fillText(labelText, textX,...