JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<div class="banner">
  Something behind
</div>
<div class="box">
  Box
</div>
<div class="box">
  Box
</div>
<div class="box">
  Box
  <div class="dtpicker">
    Dt picker
  </div>
</div>
<div class="box">
  Box
</div>

CSS

.banner {
  padding: 10 px;
  background-color: #454545;
  position: fixed;
  width: 100%;
}

.box {
  position: relative;
  float: left;
  margin-left: 20px;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid # 999;
  padding: 20 px;
  background: #45e;
  z-index: 20;
}

.box:first-child {
  margin-left: 0;
}

.dtpicker {
  background-color: #34ed22;
  padding: 20 px;
  min-width: 100 px;
  min-height: 100 px;
  position: absolute;
  left: 50 px;
  z-index: 0;
}