JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <title>Title Here</title>
  </head>
  <body>
    <section class="dummy-content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
              id mi iaculis, hendrerit lectus vel, pellentesque nisl. Morbi
              tortor nunc, imperdiet eget libero et, iaculis facilisis neque.
              Praesent purus leo, suscipit sit amet velit eu, tincidunt feugiat
              urna. Integer purus odio, mollis sed volutpat at, tincidunt tempus
              neque. In semper nunc luctus eros tincidunt scelerisque. Fusce
              commodo mi ac lorem lobortis, ut maximus tortor vestibulum. Sed
              non aliquet nisl. Vivamus eu accumsan ligula. Nam ut turpis quis
              nisl ullamcorper suscipit. Maecenas vitae vestibulum ex, eget
              pharetra arcu. Suspendisse sapien mi, euismod vel sapien nec,
              varius sollicitudin lacus. Praesent est elit, fringilla porta mi
              nec, fringilla sagittis ex. Sed cursus lobortis urna ut fringilla.
              Nulla non imperdiet ex. In vestibulum imperdiet consequat. Vivamus
              nec ex tincidunt urna volutpat blandit ut tempus felis. Sed vitae
              condimentum sapien, id scelerisque neque. Quisque vitae velit
              facilisis, mollis nisi euismod, feugiat quam. Aenean blandit
              sapien in nulla gravida dapibus in rutrum arcu. Suspendisse a
              lacus varius, pretium purus quis, rhoncus lorem. Integer ut
...

CSS

/** theme css starts **/
* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border: none;
  text-decoration: none;
  outline: none;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}
:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}
::placeholder {
  color: inherit;
  opacity: 1;
}
html,
body {
  height: 100%;
}
.col-lg- {
}
.col-md- {
}
.col-sm- {
}
.col- {
}
.img-fluid {
}
.container-fluid {
}
.justify-content-center {
}
.row {
}
.my-auto {
}
.p0 {
}

.container {
  width: 100%;
  max-width: 1170px;
}
.container-fluid {
  width: 100%;
  max-width: 1440px;
}
@media (max-width: 1199px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}

/*** ### Section One ### ***/
.section-one {
  position: relative;
  background: #ffffff;
}
.section-one h2 {
  color: #000000;
  font-size: 32px;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Medium";
}
.section-one p {
  color: #000000;
  font-size: 16px;
  margin: 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Regular";
}
.section-one .boxes {
  position: relative;
  margin-top: 75px;
}
.section-one .boxes:last-child {
  margin-bottom: 100px;
}
.section-one .boxes .left-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  z-index: 3;
}
.section-one .boxes .left-box img {
  width: 100%;
}
.section-one .boxes .right-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  height: 100%;
  z-index: 2;
}
.section-one .boxes .right-box:before {
  position: absolute;
  content: "";
  top: 50px;
  left: -30px;
  right: 0px;
  bottom: 25px;
  border: 1px solid lime;
  z-index: -1;
}
.section-one .boxes .right-box.left h2 {
  text-align: left;
}
.section-one .boxes .right-box.left:before {
  left: 0px;
  right: -30px;
  border-right: none;
  border-radius: 250px 0px 0px 250px;
}
.section-one .boxes .right-box.right h2 {
  text-align: right;
}
.section-one .boxes .right-box.right:before {
  border-left: none;
  border-radius: 0px 250px 250px 0px;
}
.section-one .boxes...