JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder">

CSS

#placeholder {
    width: 700px;
    height: 400px;
}

.flot-x-axis div.flot-tick-label { 
    /* Rotate Axis Labels */
    transform: translateX(50%) rotate(20deg); /* CSS3 */
    transform-origin: 0 0;
    
    -ms-transform: translateX(50%) rotate(20deg); /* IE */
    -ms-transform-origin: 0 0;

    -moz-transform: translateX(50%) rotate(20deg); /* Firefox */
    -moz-transform-origin: 0 0;

    -webkit-transform: translateX(50%) rotate(20deg); /* Safari and Chrome */
    -webkit-transform-origin: 0 0;

    -o-transform: translateX(50%) rotate(20deg); /* Opera */
    -o-transform-origin: 0 0;
}

JavaScript

$(function (){
    var data = [[0, 60], [1,40]];
    var ticks = [[0, "Airspeed velocity of an unladen african swallow"], [1, "Airspeed velocity of an unladen european swallow"]];
    
    $.plot("#placeholder", 
            [data],
            {
                bars: {fill: 1},
                xaxis: {
                    tickLength: 0,
                    ticks: ticks,
                    min: -0.5, 
                    max: 6.5,
                },
                grid: {
                    borderWidth: 2,
                },
                series:{
                    color: "rgb(46, 139, 87)",
                    bars: {fillColor: "rgb(60, 179, 113)"},
                    lineWidth: 2,
                },
                yaxis: {
                    min: 0, 
                    max: 100,
                },
                bars: {
                    barWidth: 0.3,
                    show: true,
                    align: "center"
                },
            });
});