JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainContent">
  <br>
  <div class="row">
    <div class="col-sm-1"> </div>
    <div class="col-sm-5">
      <div class="topcontent">
        <header>
          <h2>Who We Are</h2>
        </header>
        <p>Company Name is a freelance graphic design company based in North Carolina, owned and operated by Layne Mayo. Our goal is to provide high quality work that exceeds the clients expectation with a quick turn around time at a reasonable price. We
          pride ourselves on keeping up with current trends in the design industry to make sure we stay on the cutting edge of design to produce the best quality work for our clients.</p>
        <p></p>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="bottomcontent">
        <p><img class="img-polaroid" id="home-img" src="images/tablet.jpg"> </p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"> </div>
    <div class="col-sm-5">
      <div class="topcontent">
        <p><img class="img-polaroid" id="home-img" src="images/business-card-mockup.png"></p>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="bottomcontent">
        <header>
          <h2>What We Do</h2>
        </header>
        <p>Company Name can handle most any design job. Anything from the most basic business card to even something as big as a billboard, you think it, we make it. Some of our services include: Print Design, Web Design, Photo Editing, and Corporate Identity
          Packages. We specialize in Posters/Flyers, Business Cards, Websites, and Clothing/Fabric Design. LCEM Graphics can even handle the printing of the projects and have them shipped to your company or home.</p>
      </div>
    </div>
  </div>
</div>
<div class="list_carousel responsive">
  <br>
  <ul id="list_photos">
    <li><img src="images/carmel.jpg" class="img-polaroid"> </li>
    <li><img src="images/rula-sibai-pink-flowers.jpg" class="img-polaroid"> </li>
    <li><img...

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #000305;
  line-height: 1.429;
  margin: 0;
  padding: 0;
  text-align: left;
}

.mainContent {
  height: 100%;
  flex: 1;
  position: relative;
  background-color: #333;
  line-height: 25px;
}

.list_carousel {
  background-color: #222;
  position: relative;
}

.list_carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

.list_carousel li {
  margin: 10px;
  text-align: center;
  display: block;
  float: left;
}

.list_carousel.responsive {
  width: auto;
  margin-left: 0;
}

.mainFooter {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  width: 100%;
  float: left;
  padding-left: 0;
  background-color: #000;
  color: #CCC;
}