JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=991"></script>
<div class="container">
    <div id="dps"/>
</div>
<div id="log">
    
</div>

CSS

.container{
    height:200px;
}

JavaScript

$(function(){
    dps = new DayPilot.Scheduler("dps");
    dps.viewType = "Gantt";
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    dps.resources = [
        {name:"Viktor", id:"Viktor"}
    ]
    dps.events.list = [];
    for(var i = 0 ; i < 1 ; i++){
        var guid = DayPilot.guid();
        dps.events.list.push({
            start:new DayPilot.Date().addHours(2), 
            end:(new DayPilot.Date()).addHours(5), 
            id: guid, 
            text: guid,
            resource:"Viktor"
        })
    }
    dps.bubble = new DayPilot.Bubble({ 
						cssClassPrefix: "bubble_default",
						animated:false,
                        hideOnClick: false,
						onLoad: function(args) {
							var ev = args.source;
                            args.async = true;
							args.html = '<div id="tabs">'+
                              '<ul>'+
                              '<li><a href="#tabs-1">Tab 1</a></li>'+
                                '<li><a href="#tabs-2">Tab 2</a></li>'+
                                '<li><a href="#tabs-3">Tab 3</a></li>'+
                              '</ul>'+
                              '<div id="tabs-1">'+
                                '<p>Tab one content.</p>'+
                              '</div>'+
                              '<div id="tabs-2">'+
                                '<p>tab two content.</p>'+
                              '</div>'+
                              '<div id="tabs-3">'+
                                '<p>tab three content.</p>'+
                              '</div>'+
                            '</div>'
                            args.loaded()
                            $("#tabs").tabs();
						} 
					} );
    dps.heightSpec = "Auto";
    dps.cellWidthSpec = 'Auto';
    dps.rowHeaderWidthAutoFit = false;
    dps.businessBeginsHour = 10;
    dps.businessEndsHour = 18;
   ...