JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
  <div class="menu"><div class="inner">
    <a href="#">menu 1</a>
    <a href="#">menu 2</a>
    <a href="#">menu 3</a>
  </div></div>
  <div class="slider"><div class="inner">
    <h1>slider</h1>
  </div></div>
  <div class="main">
    <div class="content"><div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ex eum laboriosam possimus numquam nihil assumenda, dolores animi at impedit voluptates, unde officiis tenetur totam cum voluptas nemo! A, recusandae.</div></div>
    <div class="footer"><div class="inner">one two three</div></div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.outer {
  height: 100%;
}

.inner {
  margin: 0 auto;
  max-width: 400px;
  padding-left: 20px;
  padding-right: 20px;
}

.menu {
  width: 100%;
  height: 20px;
  position: absolute;
  background-color: grey;
  z-index: 9999;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.main {
  position: absolute;
  width: 100%;
  top 100%;
  background-color: lightgrey;
}

.footer {
  background-color: maroon;
  height: 50px;
}