JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Resume Builder</title>
        
<!--        <link rel="stylesheet" href="_css/semanticcss.css">   -->
    </head>
    <body>
        <div id="header-container">
            <header class="wrapper clearfix">
                <h1>Resume Builder</h1>
                <nav>
                    <ul>
                        <li><a href="#">User Generated</a></li>
                        <li><a href="#">Predefined</a></li>
                        <li><a href="#">Help</a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <h1>Resume Builder</h1>

        <form>
            <fieldset class="businessapproaches">
                <legend>Business Approach Sections</legend>
                <input type="checkbox" id="ba_all" name="ba_all" /><label for="ba_all">Toggle Business Approach    </label>
            </fieldset>
            <fieldset class="snapshot">
                <legend>Snapshot Sections</legend>
                <input type="checkbox" id="s_all" name="s_all" /><label for="s_all">Toggle Snapshot</label>
            </fieldset>
            <fieldset class="workexperience">
                <legend>Work Experience Range</legend>
                <input type="checkbox" id="workexperience_all" name="workexperience_all" /><label for="workexperience_all">Toggle Work Experience</label>
                <!-- <label for="startdate">Start Date</label>
                <input name="startdate" id="startdate" type="text" value="" class="startdate-picker" /> -->
    
                <!-- <label for="enddate">End Date</label>
                <input name="enddate" id="enddate" type="text" value="" class="enddate-picker" /> -->
                <label for="startdate">Start Date</label>
                <input id="startdate" name="startdate" type="text" value="" />
                <label for="enddate">End Date</label>
  ...

CSS

/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

aside{ display: block; }
header { display: block; width: 100%; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

/*body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }*/

.wrapper{
    width:90%;
/*    margin:0 5%; */
}

/* ===================
    ALL: Orange Theme
   =================== */

#header-container{ border-bottom: 20px solid #e44d26; }
#footer-container{ border-top:    20px solid #e44d26; }
#main aside      { border-top:    20px solid #e44d26; background:#f16529;}
#header-container,
#footer-container,
::-moz-selection { background: #f16529; color: #fff; text-shadow: none; }
::selection      { background: #f16529; color: #fff; text-shadow: none; }

/* ===============
    ALL: IE Fixes
   =============== */
.ie7 header h1 { padding-top:20px; }
/
/* ====================
    WIDE: CSS3 Effects
   ==================== */
    #header-container,
    #main aside{
        -webkit-box-shadow:0 5px 10px #aaa;
           -moz-box-shadow:0 5px 10px #aaa;
                box-shadow:0 5px 10px #aaa;
    }
/* ============
    WIDE: Menu
   ============ */

    header h1 {
        float:left;
    }
    nav{
        float:right;
        width:38%;
    }
/* ============
    WIDE: Main
   ============ */

    #main article{
        float:left;
        width:70%;
    }
    #main aside{
        float:right;
        width:25%;
    }
}
@media only screen and (min-width: 1140px) {
/* ===============
    Maximal Width
   =============== */

    .wrapper{
        width:90%; /* 1140px - 10% for margins...

JavaScript

// Generation
$('section.businessapproaches section h1').each(function() {
  var value = this.innerHTML;
  $('<input type="checkbox" checked="checked" id="ba_'+value.toLowerCase()+'" name="ba_'+value.toLowerCase()+'"/><label for="ba_'+value.toLowerCase()+'">'+value+'</label>').appendTo($('fieldset.businessapproaches'));
});
$('section.snapshot section h1').each(function() {
  var value = this.innerHTML;
  $('<input type="checkbox" checked="checked" id="'+value.toLowerCase()+'" name="'+value.toLowerCase()+'"/><label for="'+value.toLowerCase()+'">'+value+'</label>').appendTo($('fieldset.snapshot'));
});

$('section.company').each(processCompanyTime);



// Initialize the start date and end date function.
(function() {
  var start = [];
  var end = [];

//for each time.start section
  $('section.position time.start').each(function(){
    //add the 'datetime' attr to the start[]
    start.push($(this).attr('datetime'));
    //sort start[] by using compareTime
    start.sort(compareTime);
    //place the first value of start[] in the startdate box
    $('#startdate').val(start[0]);
  });
  $('section.position time.end').each(function(){
    end.push($(this).attr('datetime'));
    end.sort(compareTime);
    $('#enddate').val(end[end.length-1]);
  });
})();

$('section.techtable > h1').html($('section.techtable > h1').html().split(' / ').sort().join(' / '));

// Persistence

var formvals = {};
var keyval = location.search.replace('?','').split('&');
$.each(keyval, function() {
  var splitval = this.split('=');
  formvals[splitval[0]] = splitval[1];
});

$.each($('form')[0].elements, function() {
  var key = $(this).attr('name');
  if (key && formvals[key]) {
    $('#'+key).val(formvals[key]);
  } else {
    // if ($(this).attr('type') == 'checkbox') {
    //   $('#'+key)[0].checked = false;
    // }
  }
});


// Business Approaches
$('fieldset.businessapproaches input').on('change', function() {
  var index = $(this).prevAll('input').length - 1;
 ...