JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<section class="section-1" style="padding-bottom: 80px">
  <div class="container">
  Gallery section
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas harum dolore dolores quidem nobis eius! Ut, ipsum molestias omnis enim optio molestiae itaque mollitia eius, non, necessitatibus, alias. Nostrum, rerum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas harum dolore dolores quidem nobis eius! Ut, ipsum molestias omnis enim optio molestiae itaque mollitia eius, non, necessitatibus, alias. Nostrum, rerum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas harum dolore dolores quidem nobis eius! Ut, ipsum molestias omnis enim optio molestiae itaque mollitia eius, non, necessitatibus, alias. Nostrum, rerum.
  </div>
  </div>
  <div class="section-2" style="bottom: -50px">
    <div class="container">
      <div class="box">Call to Action</div> 
    </div>
  </div> 
</section> 

<section class="section-3" style="padding-top: 80px;">
  <div class="container">
    Testimonial section
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas harum dolore dolores quidem nobis eius! Ut, ipsum molestias omnis enim optio molestiae itaque mollitia eius, non, necessitatibus, alias. Nostrum, rerum.
  </div>
  </div>
</section>

SCSS

*{
  margin: 0;
  padding: 0;
}
section{
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;  
}

//////////////

.container{
  max-width: 600px;
  margin: auto;
  width: 100%;
}
.section-2{  
  left: 0;
  width: 100%; 
  z-index: 2;
  position: absolute;
}
.box{
  background-color: #fff;
  height: 100px;
  flex-direction: column;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; 
  width: 100%;
}

//767px

.section-1{ 
  background-color: red; 
  padding: 30px 0;
}
.section-3{  
  background-color: blue;
}