JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<nav>
  
  NAVIGATION HERE
</nav>
<section class="main-hero">
  <div>
   sdfsdf
  </div>
  <div>
   sdfsdf
  </div> 
   
</section> 

<section class="divide-under">
  sdfsdf sd fdfsdf
   
</section>

CSS

*{
  padding: 0;
  margin: 0;
  position: relative; 
}
body{ 
}
nav{position:fixed;z-index:10; } 
.main-hero{
  min-height:clamp(500px,100vh,100vh) ;
  display:flex;
  flex-direction:row;
  align-items:center; 
  background: url('https://img.freepik.com/free-photo/maple-leaf-border-background-orange-watercolor-autumn-season_53876-128735.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:bottom right;
}
.main-hero div{width:50%;background:red}
 .wave {
}

svg {
    width: 100%;  
    color:blue; 
    min-width: 100%; 
    line-height: 0;
    position: absolute !important;
    display: block;
    
    bottom:0;
    left:0 
}

 .shape-fill-white { 
    fill:#ff0000;
}  
 .shape-fill-green { 
    fill:green; 
}  
.divide-under{
   padding:50px 0 100px 0;
   background: rgb(33,99,173);background: linear-gradient(90deg, rgba(33,99,173,1) 0%, rgba(47,184,236,1) 100%);
   color:#ffffff
   }
.divide-under svg{-webkit-transform: scaleX(-1);
  transform: scaleX(-1);}

JavaScript

$(document).ready(function(){ 
})