JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://staging.plantingscience.org/javascript/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />

<link rel="stylesheet" href="http://staging.plantingscience.org/javascript/jquery-plugins/fullcalendar/fullcalendar.css" type="text/css" />

<script type="text/javascript" src="http://staging.plantingscience.org/javascript/jqwidgets/jqwidgets/jqxcore.js"></script>

<script type="text/javascript" src="http://staging.plantingscience.org/javascript/jqwidgets/jqwidgets/jqxtabs.js"></script>

<script type="text/javascript" src="http://staging.plantingscience.org/javascript/jquery-plugins/fullcalendar/fullcalendar.min.js"></script>


<div id='jqxWidget' style="margin-right:25px;">
        <div id='classInfo'>
            <ul>
                <li style="margin-left: 30px;">About This Class</li>
                <li>Student Background</li>
                <li>Teacher Expectations</li>
                <li>Class Calendar</li>
            </ul>
            <div>
<div class="z-floatleft" style="margin:15px;">
<h4>Class Time</h4>
 8:30 AM to  9:30 AM
</div>
            </div>
            <div>
            <div class="z-floatleft" style="margin:15px;">
<h4>Student Background</h4>
This is their first real biology class<br /><br />
</div>
            <div class="z-floatleft" style="margin:15px;">
<h4>Populations</h4>
            
<ul class="relatedItemList Population">
</ul>
</div>
<div class="z-floatleft" style="margin:15px;">
<h4>Grade Levels</h4>
            <ul class="relatedItemList Gradelevel">
    <li>
kindergarten
    </li>
</ul>
</div>
            </div>
            <div>
<div class="z-floatleft" style="margin:15px;">
<h4>Learning Goals</h4>
To learn basic botany
</div>
<div class="z-floatleft" style="margin:15px;">
<h4>Notes for Mentors</h4>
Challenge them!
</div>
            </div>
            <div style="height:700px;">
            <div id='classcalendar' style="height:700px;"></div>
            </div>       
        </div>
    </div>

JavaScript

$(document).ready(function() {
    var theme = '';
    // Create jqxTabs.
    $('#classInfo').jqxTabs({
        width: "700",
        autoHeight: true,
        position: 'top',
        theme: theme,
        show: function(event, ui) {
            $('#classcalendar').fullCalendar('render');
        }
    });
    $('#settings div').css('margin-top', '10px');
    $('#classInfo').bind('selected', function(event) {
        if (event.args.item == "3") {
            $('#classcalendar').fullCalendar('render');
        }
    });

});


$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#classcalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
            title: 'Start Date',
            start: new Date(2012, 9, 1),
            className: 'classstart'},
        {
            title: 'End Date',
            start: new Date(2012, 10, 9),
            end: new Date(y, m, d - 2),
            className: 'classend'},
        {
            title: 'Away, Dr. A',
            start: new Date(2012, 9, 15),
            end: new Date(2012, 9, 17),
            className: 'mentoraway'},
        {
            title: 'Class Break',
            start: new Date(2012, 9, 8),
            allDay: true,
            className: 'classbreak'}
        ],
        month: '9',
        year: '2012',
        date: '15'
    });


});