JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="sectionContainer">
  <div class="bothSections">
    <div class="firstSection">
      <div class="openOrb firstOrb backgroundColor1">
<svg preserveAspectRatio="xMidYMid" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<path class="orbSVG" d="m30 49s15 21.8 15 23-4.8 5-6 5-34-53-34-53 0.8-2.8 2-4 5 0 5 0 0.4-5 8-5c0.025 0 4 7 4 7s2.171-1 4-1h3l-3-6 7 2 2 6 7 1-3-6h7s5.409 0.326 9-3c5e-3 -5e-3 0.288 0.848 0 1-8.052 4.258-8.974 1.833-9 2-0.011 0.073 4 7 4 7l9-3 4 6-10 3 4 8s2.487-0.246 5-1c2.487-0.746 5-2 5-2l6 8s-3 3-12 3c-0.2 0-4-8-4-8l-7-1 4 8-8-2-4-8-6-1 4 8h-6l-5-8s-3.601 2.33-5 4c-0.645 0.77-1 2-1 2l-5-8s1.156-1.848 3-3c2.135-1.334 4-2 4-2l4 7h7l-4-8 6 2 4 7 8 2-4-7h7l-3-6-8-1 4 7-8-2-3-6-6-2 3 6-7 1-3-6s-2.814 0.028-5 1c-2.31 1.027-4 3-4 3s14.191 21.933 14.223 21.808c1.32-5.135 7.129-4.921 6.777-4.808-4.945 1.586-6 6-6 6z"/>
</svg>

      </div>
      <div class="sectionStuff firstSectionStuff">
        <div class="sectionStuffTitle">GETTING STARTED WITH iNAVY</div>
         <div class="flex">
          <div class="sectionStuffBlurb" id="blurbA1">
            <div class="sectionStuffIcon"></div>
            <span class="sectionStuffTitle blueText">Get Started</span>
The iNAVY team is ready to help you stand up SharePoint services. 
<br />Schedule a Consultation: <a href="#">Ask iNAVY</a>
<br />Initiate services: <a href="#">New Service Request</a>
<br />Prepare for migration: <a href="#">iNAVY Migration</a>
          </div>
          <div class="sectionStuffBlurb" id="blurbA2">
            <div class="sectionStuffIcon"></div>
            <span class="sectionStuffTitle blueText">Economies of Scale</span>
Centralizing all of the Navy’s SharePoint services 1 license per person, across all Navy sites. It also means lower costs for maintenance and hosting services. 
          </div>
          <div class="sectionStuffBlurb" id="blurbA3">
            <div class="sectionStuffIcon"></div>
            <span class="sectionStuffTitle...

CSS

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.orbSVG {
  fill: #fff;
  fill-rule: evenodd;
}

.openOrb.firstOrb>svg {
  padding: 6px;
  width: 90px;
}

.openOrb.secondOrb>svg {
    width: 86px;
    padding: 9px 6px;
}

.sectionContainer {
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.openOrb {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  margin-left: 0px;
  position: relative;
  z-index: 3;
}

.backgroundColor1 {
  background: #3E628F;
}

.backgroundColor2 {
  background: #a50d12;
}
.backgroundColor3 {
    background: grey;
}
.sectionStuff {
  width: calc(100% - 80px);
  height: auto;
  overflow: hidden;
  border: 2px solid;
  border-radius: 3px;
  margin-left: 50px;
  margin-top: -80px;
  position: relative;
  z-index: 2;
}
.firstSectionStuff {
  animation-name: section1StuffAnimationIn;
  animation-duration: 5s;
}
@keyframes section1StuffAnimationIn {
  0% {
    height: 0px;
    width: 0px;
    border-width: 0px;
    opacity: 0;
    margin-left: 50px;
    margin-top: 0px;
    min-height: 0;
  }
  84% {
    height: 0px;
    width: 0px;
    opacity: 0;
  }
  85% {
    width: 0px;
    height: 0;
    opacity: 1;
    margin-left: 50px;
    margin-top: -80px;
    border-width: 0px;
  }
  94% {
    height: 500px;
  }
  100% {
    width: calc(100% - 80px);
    height: auto;
    border-width: 2px;
    margin-top: -80px;
  }
}
.secondSection {
    width: calc(100% - 220px);
    display: inline-block;
    transition: .3s;
}
.secondSection.scootForCal {
    width: calc(100% - 520px);
}
.secondSectionStuff {
  animation-name: section2StuffAnimationIn;
  animation-duration: 5s;
  width: 100%;
}
@keyframes section2StuffAnimationIn {
  0% {
    height: 0px;
    width: 0px;
    border-width: 0px;
    opacity: 0;
    margin-left: 50px;
    margin-top: 0px;
    min-height: 0;
  }
  84% {
    height: 0px;
    width: 0px;
    opacity: 0;
  }
  85% {
    width: 0px;
    height: 0;
    opacity:...

JavaScript

$(document).ready(function() {
    $('.thirdOrb').click(function() {
        $('.thirdSection').addClass('openCal');
        $('.secondSection').addClass('scootForCal');
    });
});