JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<p>The From and To Date on charts per tab seem to behave oddly depending on whether the tab they are on was visible when rendering</p>

<p>Chart1 allows you to enter a date (eg change from Jan 1, 1970)</p>
<p>Chart2 seems not to render to the full width as well as not allowing you to enter a date</p>
<p>Chart3 has the option to hide and fadein - as per <a href="http://stackoverflow.com/questions/20964746/range-selector-input-fields-cant-edit-after-hide-show">stackoverflow-Range selector input fields can't edit after hide() show()</a> </p>
<p>Chart 4 only gets created when you click the link on the tab, and renders perfectly</p>

Click <a href="#" Id="create5">Create 5</a> before opening tab 5 (or at least while 5 isn't open


<ul id="nav">
    <li><a href="#part-1">One</a></li>
    <li><a href="#part-2">Two</a></li>
    <li><a href="#part-3">Three</a></li>
    <li><a href="#part-4">Four</a></li>
    <li><a href="#part-5">Five</a></li>
</ul>
<br/>
<div id="content">
    <div id="part-1">
        <div id = "container1" style = "height: 300px;"></div>
    </div>
    <div id="part-2">
        <div id = "container2" style = "height: 300px;"></div>
    </div>
    <div id="part-3">
        <a href="#" Id="fix3">Hide and FadeIn</a>
        <div id = "container3" style = "height: 300px;"></div>
    </div>
    <div id="part-4">
        <a href="#" Id="create4">Create 4</a>

        <div id = "container4" style = "height: 300px;"></div>
    </div>
    <div id="part-5">

        <div id = "container5" style = "height: 300px;"></div>
    </div>
</div>

CSS

#nav li {
    display: inline;
}

JavaScript

$(function() {
    $('#nav').find('a').click(function(e) {
        e.preventDefault();
        $(this.hash).show().siblings().hide();
    }).filter(':first').click();
    
    $('#fix3').click(function(e) {
        e.preventDefault();
        
       $('#container3').hide().fadeIn(1500);
    });
    $('#create4').click(function(e) {
        e.preventDefault();
        
       $('#container4').highcharts('StockChart', {
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            text: 'Creating while tab is visible seems to work...'  
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
        
    });
    
      $('#create5').click(function(e) {
        e.preventDefault();
        
       $('#container5').highcharts('StockChart', {
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            text: 'Creating while tab is visible seems to work...'  
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
        
    });
    
    
    $('#container1').highcharts('StockChart', {
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            text: 'Chart 1, works as advertised'  
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
    
    $('#container2').highcharts('StockChart', {
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar',...