JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
  <div class="header">
    <div class="left">
      <h1>demo</h1>
    </div>
    <div class="right">
      <div class="slider">
        <div class="text"></div>
      </div>
    </div>
  </div>
  <div class="content"></div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.body {
  width: 100%;
}
h1 {
  position: absolute;
  margin: 0;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
div.body:after {
  content: '';
  display: table;
  clear: both;
}
div.header {
  width: 100%;
  position: relative;
}
div.header:after {
  content: '';
  display: table;
  clear: both;
}
div.header div.left {
  width: 50%;
  float: left;
  padding-top: 20%;
  position: relative;
  background: yellow;
}
div.header div.right {
  width: 50%;
  float: left;
  padding-top: 20%;
  background: red;
  position: relative;
}
div.header div.slider {
  position: absolute;
  left: 40px;
  right: 40px;
  background: blue;
  top: 40px;
  bottom: 0;
}
div.header div.slider div.text {
  position: absolute;
  width: 80%;
  padding-top: 20%;
  background: white;
  top: 100%;
  left: 10%;
}
div.content {
  width: 90%;
  margin: auto;
  padding-top: 20%;
  background: black;
}
@media (max-width: 700px) {
  div.header div.left {
    width: 100%;
  }
  div.header div.right {
    width: 100%;
    padding-top: 40%;
  }
  div.content {
    padding-top: 40%;
    width: 100%;
  }
}