JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='page-section one'>
  <div class='content-background one'>
  
  </div>
  <div class='content-background two'>
  
  </div>
  <div class='content-background three'>
  
  </div>
</div>
<div class='page-section two'>
  <div class='circles-wrap'>
    <div 
         class='background-shape shape-circle shape-top-left' 
         ></div>
    <div 
         class='background-shape shape-circle shape-top-left--inner' 
         >
         
         </div>
    <div 
         class='background-shape shape-circle circle-filled circle-small v-1-filled-one' 
         >
         
         </div>
    <div 
         class='background-shape shape-circle circle-filled circle-x-small v-1-filled-two' 
         >
         
         </div>
  </div>
  <div class='content-section-two'>
    bbla bla bla
  </div>
</div>

SCSS

$blue: #0059ff;
$green: #00d268;
$green-desat: #5ad889;
// 07d85a
$text-color: #1e1f21;
$text-color-light1: lighten($text-color, 10%);
$text-color-light2: lighten($text-color, 20%);
$border-light-color: #dfe5ec;
$bborder-color: darken($border-light-color, 10%);
$orange: #ffb200;

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  height: 100%;
}
.page-section {
  padding: 40px;
  // border: 1px dashed #ddd;
  position: relative;
  z-index: 10;
  width: 50%;
  display: flex;
  flex-direction: column;
  
  &.one {
    background: #eee;
  }
  
  &.two {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.content {
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
}

.content--second-section {
  position: relative;
  z-index: -1;
}

.content-background {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
  z-index: -3;
  background: linear-gradient($blue, darken($blue, 30%));

  
  
  &.two {
    background-image: url(https://images.assetsdelivery.com/compings_v2/theseamuss/theseamuss1507/theseamuss150700036.jpg);
    background-image: url(https://p0.pikist.com/photos/865/126/fish-scale-texture-macro-closeup-skin-marine-animal-fresh.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.03;
  }
  
  &.three {
    z-index: -1;
    width: 100px;
    
    background-image:...