JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="banner">
<!--
<div class="light">
   <h1>Houston</h1>
  <img src="https://i.pinimg.com/564x/2b/4c/8c/2b4c8ca3650b9b3bc59658446fa427f5.jpg">
</div>
-->
  <div class="circle1"></div>
  <div class="square1"></div>
  <div class="square2"></div>
  <div class="square3"></div>
  <div class="circle2"></div>
  <div class="circle3"></div> 
</div>

CSS

*{
  MARGIN:0;
  padding:0; 
}
body{
  background:#f9fdff;
}
.banner{
  width:calc(100% - 2px);
  max-width:1920px;
  max-height:525px;
  border:1px solid #ccc;
  overflow:hidden;
  background:#f9fdff;
}
.circle1{
  width:115px;
  height:115px;
  border-radius:50%;
  background: #0083bb;
  margin-top: 250px;
  margin-left: 30px;
  position: relative;
  z-index: 9;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
}
.circle2{
  width:880px;
  height:880px;
  border-radius:50%;
  background: #0083bb;
      margin-top: -1275px;;
  margin-left: 1100px;
  position: relative;
  z-index: 7;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
}
.circle3{
  width:780px;
  height:780px;
  border-radius:50%;
  background: #ffffffc7;
  margin-top: -831px;
  margin-left: 1155px;
  position: relative;
  z-index: 8;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
}
.square1{
  width:525px;
  height:525px;
  background: #ffffff;
  transform: rotate(34deg);
  margin-top: -425px;
  margin-left: 80px;
    -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
}
.square2{
     width: 900px;
    height: 900px;
  background: #0083bb;
  transform: rotate(34deg);
  margin-left:550px;
  margin-top: -620px;
  position: relative;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.3);
}
.square3{
      width: 550px;
    height: 550px;
  background: #ffffff40;
  transform: rotate(34deg);
      left: 900px;
    top: -860px;
  position: relative;
  z-index: 6;
}
#portfolio {
   ...