JSFiddle - React, Tailwind, and code Playground

by eyesofjeremy

HTML

<div class="row" style="background-color:#393939;">
    <div class="rowcontainer">
      <div class="side">
        <span class="side-title">Headline</span><br>
        <span class="side-second">Lorem Ipsum</span><br>
        <span class="side-third">Dolor Sit</span>
      </div>
    </div>
  </div>


  <div class="row" style="background-color:#e2041d;">
   <div class="rowcontainer">
      <div class="side">
        <span class="side-title">Amet</span><br>
        <span class="side-second">Nothing here</span><br>
        <span class="side-third">Test</span>
      </div>
    </div>
  </div>


  <div class="row" style="background-color:#444444;">
    <div class="rowcontainer">
      <div class="side">
        <span class="side-title">Lorem ipsum dolor sit amet</span><br>
        <span class="side-second">ut labore et </span><br>
        <span class="side-third"></span>
      </div>
    </div>
  </div>


  <div class="row" style="background-color:#660084;">
    <div class="rowcontainer">
      <div class="side">
        <span class="side-title">eirmod tempor</span><br>
        <span class="side-second">aliquyam</span><br>
        <span class="side-third">sadipscing elitr</span>
      </div>
    </div>
  </div>


  <div class="row" style="background-color:#232323;">
    <div class="rowcontainer">
      <div class="side">
        <span class="side-title">At vero eorebum</span><br>
        <span class="side-second">accusam et</span><br>
        <span class="side-third">gubergren</span>
      </div>
    </div>
  </div>

CSS

body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  color:#ffffff;
  font-size: 30px;
}

.side {
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 300px;
  height: 100px;
  background-color: #ff00ff;
}

.row {
  border-bottom: 1px solid #ffffff;
  min-height: 700px;
  height: 700px;
  position: relative;
  overflow: hidden;
}
.rowcontainer {
  position: absolute;
  clip: rect(1px  auto  auto  1px); /* IE4 to IE7 */
  clip: rect(1px, auto, auto, 1px); /* IE8+ & other browsers */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  overflow:hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.rowcontainer {
	clip: auto;
  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)
}
}