JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<header>
  <div class="logo"></div>
</header>
<div id="slider">
  <div class="slider"></div>
</div>
<div class="about_us">
  <div class="ab_1"></div>
  <div class="ab_2"></div>
</div>

CSS

body {
  padding-top: 70px;
  margin: 0;
}
* {
  box-sizing: border-box;
}
header {
  width: 100%;
  padding: 10px;
  position: fixed;
  top: 0;
  background: #eee;
}
header div.logo {
  width: 50px;
  height: 50px;
  background: grey;
  margin-left: 50px;
}
div#slider {
  width: 100%;
  height: 300px;
  background: #bbb;
  position: relative;
  padding: 20px;
}
div.slider {
  width: 100%;
  height: 100%;
  background: #ccc;
  position: relative;
}
div.about_us {
  width: 100%;
  position: relative;
  padding: 20px;
}
div.about_us:after {
  content: '';
  display: table;
  clear: both;
}
div.ab_1 {
  width: 50%;
  float: left;
  height: 200px;
  background: #eee;
}
div.ab_2 {
  width: 50%;
  float: left;
  height: 200px;
  background: #bbb;
}

JavaScript

console.log('fwefw')