JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<body>
<script id="template" type="text/x-handlebars-template">
<div class="container">

 {{#each this}}
    <div class='titles'>
      <div class="left">Aspire Logo</div>
      <div class="middle">{{IG}}</div>
      <div class="right">Common Core</div>
      <div class="purple"></div>
    </div>
    <div class="split">
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">AIR</span> Indicators:
        </p>
        <ul>
          <li>{{AIR_Indicators}}</li>
        </ul>
      </div>
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
        </p>
        <ul>
          <li>{{SMP}}</li>
        </ul>
      </div>
    </div>
      <div class="purpose heading">
        <h3>Purpose</h3>
      </div>
      <div class="purpose text">
        <p>
          {{Purpose}}
        </p>
      </div>
    <div class="process heading">
      <h3> Process </h3>
    </div>

    <div class="bottom-container text">
        <div class="cube">
          <h4>Instructional Practice</h4>
          <center><h3> {{IP}} </h3> </center> </br>
          <p><span class="description">What</span> {{What}} </p></br>
          <p><span class="description">When</span> {{When}} </p></br>
          <p><span class="description">How</span> {{How}} </p></br>
        </div>
    </div>
{{/each}}
</div>

</script>

CSS

.container {
  margin: 20px auto;
  width: 1060px;
  border: 2px;
  border-style:solid;
  border-color:#98bf21;
  padding: 0px 0px;
}

h4 {
  text-align: center;
  margin: 0px 0px;
}

.titles{
  vertical-align: middle;
  text-align: center;
  background-color: #ECF0F1;
  border: 2px;
  border-style:solid;
  border-color:#98bf21;
  color: purple;
  font-size: 2.0rem;
  font-weight: bold;
}


.heading{
  line-height: 60px;
  vertical-align: middle;
  text-align: center;
  background-color: #ECF0F1;
  border: 2px;
  border-style:solid;
  border-color:#98bf21;
  height: 60px;
  color: purple;
  font-weight: bold;
}

.middle{
  border-top: 0px;
  border-bottom: 0px;
  border-right: 2px;
  border-left: 2px;
  border-style:solid;
  border-color:#98bf21;
}

.middle,.right, .left {
  line-height: 70px;
  height: 70px;
  width: 345px;
  padding: 0px;
  display: inline-block;
}

.purple{
  padding: 10px;
  border: 0px;
  background-color: purple;
}

.split .text {
  padding: 10px;
  width: 526px;
  display: inline-block;
  border: 0px;
  border-top: 0px;
  border-right: 2px;
  border-style:solid;
  border-color:#98bf21;
}

.bottom-container .text{
  padding: 10px;
}

.bottom-container h3{
  margin: 0px;
}

.split-heading {
  text-decoration: underline;
  text-align: center;
}

.split-heading .bold{
  font-weight: bold;
}

ul li{
  list-style-type:  none;
  text-align: center;
}

span.description {
  font-weight: bold;
  color: purple;
}

.bottom-container {
    width: auto;
    overflow: auto;
    padding: 0;
    margin: auto;
    word-wrap:break-word;
}

.cube {
    float: left;
    background: #FFF;
    width: 50%; height: 500px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    padding: 10px;
}

JavaScript

$(document).ready(function(){

function filterDuplicates(array){
  // this will hold the new filtered dictionary
  var uniqArray  = [],
  // this is used for the lookup
      dupCheck = {};
  for( var i=0; i< array.length; i++){
    var entry = array[i];
    var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
    if(!dupCheck[uniqueKey]){
      // here there are only unique values
      dupCheck[uniqueKey] = true;
      uniqArray.push(entry);
    }
  }
  console.log(uniqArray)
  return uniqArray;
}


var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [

{"IG":"Problem Solving", "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4", "SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8", "Purpose": "Students must be able to reason, problem solve, communicate and make real life       decisions that require mathematical thinking.  Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)", "IP":"Problem of the Week(PoW)", "What": "PoWs are omplex problems that students solve and then explain their solutions and reasoning in a write up.  More weight should be given to mathematical thinking and a good write up than finding the correct solution.", "When": "PoWs should be administered once per month.  Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days.", "How": "1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up"},

{"IG":"Problem Solving", "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",...