JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script src="js/global.js"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/global.css">
    <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
</head>

<body>
<center>
    <div class="container fade-in" id="records">
        <br/>

        <div class="row" id="item1" class="box">
            Item 1 Details for the PDF test.<br>

            <input type="checkbox" id="check1" name="sample[]" value="red" class="checkmate"/> <em>This</em> is a checkbox1
                     <br />

        </div>

        <div class="space"></div>
 
        <div class="row" id="item2" class="box">
            Item 2 Details for the PDF test.<br>

            <input type="checkbox" id="check2" name="sample[]" value="red" class="checkmate"/> <em>This</em> is a checkbox2
                     <br />

        </div>

        <div class="space"></div>

        <div class="row" id="item3" class="box">
            Item 3 Details for the PDF test.<br>

            <input type="checkbox" id="check3" name="sample[]" value="red" class="checkmate"/> <em>This</em> is a checkbox3
                     <br />

        </div>

        <div class="space"></div>

        <div class="row" id="item4" class="box">
            Item 4 Details for the PDF test.<br>

            <input type="checkbox" id="check4" name="sample[]" value="red" class="checkmate"/> <em>This</em> is a checkbox4
                    <br />
        </div>

        <div class="space"></div>

        <center>
    ...

CSS

/*
* {
    background: #d9d9d9;
}
*/
.container { 
    width:100%;
}
#records { 
/*    width:100%;*/
    background-color:#b3ecff; 
    width: 800px; 
    margin: 0 auto;
    height:800px;
}
#item1 { 
    padding:20px;
    width:300px;
    height:125px;
    text-align:center;
    background:#ddd;
    border-radius:4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
    transition: 2s;
}
#item1:hover { 
    background:#ccffeb;
    transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;
}
#item2 {    
    padding:20px;
    width:300px;
    height:125px;
    text-align:center;
    background:#ddd;
    border-radius:4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
}
#item2:hover { 
    background:#ffe5e5;
    transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;
}
#item3 { 
    padding:20px;
    width:300px;
    height:125px;
    text-align:center;
    background:#ddd;
    border-radius:4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
}
#item3:hover { 
    background:#eeffcc;
    transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;
}
#item4 { 
    padding:20px;
    width:300px;
    height:125px;
    text-align:center;
    background:#ddd;
    border-radius:4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
}
#item4:hover { 
    background:#ffe5b3;
    transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;
}
.space { 
    padding-top:10px;
    padding-bottom:10px;
    border-radius:4px 4px 4px 4px;
}
.col-md-8 { 
    width:800px;
}
.btn-primary { 
    background: red !important;
    background-image: none !important;
    font-family: 'Courgette', cursive;
    font-size:14px;
    transition:font-size: 0.5s; /* Animation time */
    -webkit-transition:height 0.5s; /* For Safari */
}
.btn-primary:hover { 
    font-size:23px;
    background: green;
    transition: font-size 0.1s linear;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to {...

JavaScript

$(document).ready(function() {

texts = {
    item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  }
  $("#container").css('background', '#fff')

   $('.download-pdf').click(function() {

    notChecked = $("input[type=checkbox]:not(:checked)").parent();
    notChecked.hide();
    yesChecked = $("input[type=checkbox]:checked").parent();

    $.each(yesChecked, function( index, el ) {
      $(el).show().html(texts[$(el).attr('id')]);
    });

    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML(document.getElementById('records'), function(){
    	pdf.save('test.pdf');
    });
 });
    
    $('.checkmate').on('click', function() {
      if ($(this).is(':checked'))
        $(this).parent('div').css({"color":"white","background":"green"});
      else
        $(this).parent('div').css('background-color', '');
    });
    
});