JSFiddle - React, Tailwind, and code Playground

HTML

<body>
       <div class="container">
        <div class='titles'>
          <div class="left">Aspire Logo</div>
          <div class="middle">Problem Solving</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>All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4", "SMP</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 1, 2, 3, 4, 5, 6, 7, and 8"</li>
            </ul>
          </div>
        </div>
          <div class="purpose heading">
            <h3>Purpose</h3>
          </div>
          <div class="purpose text">
            <p>
              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.)
            </p>
          </div>
        <div class="process heading">
          <h3> Process </h3>
        </div>  
      <div class="bottom-container text">
        <div class="cube">
          <h4>Instructional Practice</h4>
          <center><h3> Problem Solving</h3> </center> </br>
          <p><span class="description">What</span> PoWs are complex problems. </p></br>
          <p><span class="description">When</span> PoWs...

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;
}