JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div class="container-fluid">
    <div class="category">
        category
    </div>
    <div class="category">
        category
    </div>
    <div class="category">
        category
    </div>
    <div class="category">
        category
    </div>

</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS

html, body {
  height: 100%;
  background-color: rgb(20,20,20);
  font-family: ProximaNovaAltBold,Arial,Helvetica,Sans-serif;
}

.container-fluid {
  position:relative;
  min-height: 100%;
  height:100%;
  width:100%;
  border:1px solid green;
}

.category {
  position: relative;
  height: 375px;
  margin-top:25px;
  white-space: nowrap;
  overflow: hidden;
  border:1px solid red;
}
.container-fluid:after {
  content: "";
  display: block;
}
.site-footer, .container-fluid:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}