JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="work-section" id="work">
    <div class="container">
        <div class="work-section-head text-center wow fadeInRight" data-wow-delay="0.4s">
            <h3>Event name placeholder</h3>         
        </div>
        <div class="work-section-grids text-center wow fadeInUp" data-wow-delay="0.4s">
            <div class="col-md-3 work-section-grid text-center">
                <i class="fa fa-users fa-5x icons"></i>
                <h4>Who</h4>
                <p>People placeholder</p>               
            </div>
            <div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="0.6s">
                <i class="fa fa-calendar fa-5x icons"></i>
                <h4>When</h4>
                <p>Date placeholder </p>                
            </div>
            <div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="0.8s">
                <i class="fa fa-globe fa-5x icons"></i>
                <h4>Where</h4>
                <p>Place placeholder</p>
            </div>
            <div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="1s">
                <i class="fa fa-question-circle fa-5x icons"></i>
                <h4>What</h4>
                <p>Information placeholder </p>
            </div>
        </div>  
    </div>
</div>

CSS

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 600;
}

h1 {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    margin: 100px 0 30px 0;
}


p {
  font-size: 20px;
  line-height:30px;
}
a {
  color:#c0392b;
}
a:hover {
  color: #f96e5e;
}
a img {
  border:0;
}
a.button {
  display:inline-block;
  color:#FFF;
  background-color:#c0392b;
  text-decoration:none;
  padding:10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom:10px;
  -webkit-transition: background 0.2s ease-out;
  -moz-transition: background 0.2s ease-out;
  -ms-transition: background 0.2s ease-out;
  -o-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}
a.button:hover {
  background-color:#f96e5e;
}
a.button.small {
  background-color:#7f8c8d;
  padding:8px;
  font-size:0.8em;
}
a.button.small:hover {
  background-color:#95a5a6;
}
.section {
  margin:0;
  padding:40px;
  background-color:#ecf0f1;
}
.section.odd {
  background-color:#dbe0e0;
}
.wrapper {
  margin:40px auto;
  width:1200px;
}
.half {
  width:49%;
  display:inline-block;
  vertical-align:middle;
}
.padding {
  20px;
}
.half.left .padding {
  padding:0 20px 20px 0;
}
.half.right .padding {
  padding:0 0 20px 20px;
}
.half img {
  max-width:100%;
  width: auto !important;
  height:auto !important;
}
.space {
  height:40px;
}


/* section-specific styles */
#header {
  background-color:#c0392b;
  background-repeat:repeat-x;
  background-position:bottom center;
  color:#FFF;
  padding-bottom:90px;
}
#header h1, #header h2 {
  text-align:center; 
}
#header h2 {
  color: #FDD;
  margin: 20px 0 20px 0;
}

#footer {
  background-color: #152330;
  background-repeat:repeat-x;
  background-position: top center;
  color:#FFF;
}



.lead {
    font-size: 18px;
    font-weight: 400;
}

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}


.intro-header {
    padding-top: 50px; 
    padding-bottom:...