JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div class="hero">
  
</div>
<p>this is content</p>

CSS

body {
  background: #0f0f0f;
}
.hero {
  width: 100%;
  height: 300px;
  background-color: blue; 
  position: relative;
  margin-bottom: -70px;
  z-index: -1;
}

.hero + p {
  margin-left: 40px;
}

.hero:before {
  content: '';
  display: block;
  width: 70%;
  height: 100px;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 0;
}