JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="inner-1">
        <div class="top"></div>
        inner 1
          inner 1
          inner 1
          inner 1
          inner 1  inner 1
        <div class="bottom"></div>
          <div class="top"></div>
        inner 1
          inner 1
          inner 1
          inner 1
          inner 1  inner 1
        <div class="bottom"></div>
    </div>
     <div class="inner-1">
        <div class="top"></div>
        inner 1
          inner 1
          inner 1
          inner 1
          inner 1  inner 1
        <div class="bottom"></div>
          <div class="top"></div>
        inner 1
          inner 1
          inner 1
          inner 1
          inner 1  inner 1
        <div class="bottom"></div>
    </div>
    <div class="inner-2">
        <div class="top"></div>
        inner 2
        <div class="bottom"></div>
    </div>
</div>

CSS

.main{
  height: 600px;
  border: 20px solid black;
  width: 400px;
  padding: 5px;
  background: red;
    display: inline-block;
}

.inner-1{
  height: 250px;
  width: 200px;
  background: blue;
    display: block;
  position: relative
}

.inner-2{
  margin-top: 10px;
  height: 250px;
  width: 200px;
  background: orange;
    display: block;
  position:relative;
}
.top {
    /* FF3.6+ */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
     /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    /* W3C */
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
    top: 0px;
    height: 13px;
    position: absolute;
    width: 200px;
}
.bottom {
    /* FF3.6+ */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
     /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    /* W3C */
    background:...