JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.metro.min.css">
<div class="chart-wrapper" style="margin: auto;">
    <div id="chart"></div>
</div>

JavaScript

function createChart() {
    
// use as theme: 'newTheme'
kendo.dataviz.ui.registerTheme('newTheme', {
    "chart": {
        "title": {
            "color": "#777777"
        },
        "legend": {
            "labels": {
                "color": "#777777"
            }
        },
        "chartArea": {},
        "seriesDefaults": {
            "labels": {
                "color": "#000"
            }
        },
        "axisDefaults": {
            "line": {
                "color": "#c7c7c7"
            },
            "labels": {
                "color": "#777777"
            },
            "minorGridLines": {
                "color": "#c7c7c7"
            },
            "majorGridLines": {
                "color": "#c7c7c7"
            },
            "title": {
                "color": "#777777"
            }
        },
        "seriesColors": [
            "#0070c0",
            "#a8a8a8",
            "#25a0da",
            "#7030a0",
            "#ffff00",
            "#d8e404"
        ],
        "tooltip": {
            "background": "#fff",
            "color": "#000"
        }
    },
    "gauge": {
        "pointer": {
            "color": "#8ebc00"
        },
        "scale": {
            "rangePlaceholderColor": "#e6e6e6",
            "labels": {
                "color": "#777"
            },
            "minorTicks": {
                "color": "#777"
            },
            "majorTicks": {
                "color": "#777"
            },
            "line": {
                "color": "#777"
            }
        }
    }
});
    
    $("#chart").kendoChart({
        theme: "newTheme",
        title: {
            text: 'Spain electricity production (GWh)',
            align: 'left'
        },
        legend: {
            position: 'right'
        },
        series: [{
            type: "line",
            dashType: 'dash',
            name: "World",
            data: [15.7, 16.7, 20, 23.5, 26.6],
            axis: 'Green',
            width:...