JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<header>
<div class="header-content">
  <h1>Header Content</h1>
  </div>
</header>

<section>
  <h1>Section Content</h1>
</section>

CSS

header {
  position: absolute;
  height: 300px;
  background-image: linear-gradient(#2473A6, #E9F0E2);
  width: 100%;
  
  /* border-bottom-left-radius: 50% 20%; */
  border-bottom-right-radius: 80% 30%;
  z-index: 10;
}

.header-content {
  content: "";
  position: relative;
  display: inline-block;
  height: 300px;
  width: 100%;
  top:0;
  left:0;
  background-image: linear-gradient(#235EA1, #2473A6);
  
  /* border-bottom-left-radius: 50% 20%; */
  
  border-bottom-right-radius: 70% 70%;
  z-index: 5;
}

h1 {
  margin: 0;
  padding: 100px 0;
  font-size: 44px;
  text-align: center;
}

header h1 {
  color: white;
}