JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="wrap-sections">
<section class="section-1">Gallery section</section>
<section class="section-2">Call to Action</section>
<section class="section-3">Testimonial section</section>
</div>

SCSS

*{
  margin: 0;
  padding: 0;
}
.wrap-sections{
  position: relative;
  
.section-2{
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform:translateY(-50%);
  }
}

section{
  display: flex;
  align-items: center;
  justify-content: center; 
}

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


.section-1{
  height: 50vh;
  background-color: red;
}
.section-2{
  height: 30vh;
  opacity: 0.8;
  background-color: yellow;
}
.section-3{
  height: 50vh;
  background-color: blue;
}