JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="heroContainer scroll">
  <div class="heroOverlay"></div>
  <div class="resourcesBackground">
    <div class="resourcesHeroL"></div>
    <div class="resourcesHeroR"></div>
    <div class="resourcesHeroRfixdigitalartifacting"></div>
  </div>
  <div class="resourcesHeroM"></div>
  <div class = "resourcesHeroMfixdigitalartifacting2"></div>
  <div class="heroText whiteText">
    <span class="lText">CLOUD SERVICE</span>
    <div class="break20"></div>   
    <span class="h1">Resources</span>
    <div class="break20"></div>
    <p class="lText whiteText lineHeightCustom">Explore the cloud service resources we've consolidated<br>to help you bridge the gap between knowing and doing.</p>
  </div>
</div>

CSS

.heroContainer {
    height: 560px;
    position: relative;
    background: black;
    overflow: hidden;
  
  
}
.heroOverlay {
    background: rgba(1, 82, 146, .34);
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.resourcesBackground {
  width: calc(1500);
  position: absolute;
}
.resourcesHeroL {
  background: url('https://mp-dev.cloud.navy.mil/resourcesHeroL.png');
  width: 977px;
  height: 598px;
  background-repeat: no-repeat;
  position: absolute;
}
.resourcesHeroR {
  background: url('https://mp-dev.cloud.navy.mil/resourcesHeroR.png');
  width: 550px;
  height: 331px;
  background-repeat: no-repeat;
  position: absolute;
  margin-left: 977px;
}
.resourcesBackground {
    width: 1500px;
    position: absolute;
    margin-left: calc(50vw - 750px);
}
.resourcesHeroRfixdigitalartifacting {
    position: absolute;
    background: radial-gradient(black, transparent);
    filter: blur(40px);
    width: 400px;
    height: 400px;
    border-radius: 200px;
    margin-left: 1300px;
    margin-top: -130px;
}
.resourcesHeroM {
    background: url(https://mp-dev.cloud.navy.mil/resourcesHeroM.png);
    width: 903px;
    height: 615px;
    background-repeat: no-repeat;
    position: absolute;
    margin-left: calc(50vw - 261px);
    margin-top: 32px;
}
.resourcesHeroMfixdigitalartifacting2 {
    position: absolute;
    background: radial-gradient(#020000, transparent);
    filter: blur(10px);
    width: 80px;
    height: 200px;
    border-top-left-radius: 106px 328px;
    margin-left: calc(50vw + 576px);
    margin-top: 225px;
}
.heroText {
  color: white;
  position: absolute;
  left: calc(30% - 200px);
  top: 200px;
  z-index: 5
}