JSFiddle - React, Tailwind, and code Playground

by zhouzhijun01

HTML

<div id="root">
  <div>
    <section>
      <header></header>
    </section>
    <div>
      <section class="home_hero"></section>
    </div>
    <div class="icofont-ads-container">
      <div class="icofont-ads-c">
        <div class="gwd-page-wrapper">
          <div class="gwd-page-content">
            <div id="gwd-image-1" class="gwd-image-1">
              <div class="intermediate-element">
                <img src="https://icofont.com/images/ads/bg.png" />
              </div>
            </div>
            <div class="animation-holder">
              <div class="left-section">
              
              </div>
              <div class="middle-section">
                <div class="gwd-image-sbqb gwd-image">
                  <div class="intermediate-element">
                    <img src="https://icofont.com/images/ads/btn-shadow.png" />
                  </div>
                </div>
                <a href="#">
                  <div class="gwd-div-ltec"></div>
                  <span class="gwd-span-lw">FREE DOWNLOAD</span>
                </a>
              </div>
              <div class="right-section">
              
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
    background: #f6f6f9;
    font-family: Nunito,sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #1f1142;
    padding-top: 80px;
    font-weight: 400;
    text-rendering: auto;
    margin: 0 !important;
}
section {
  display: block;
}
header {
    background: #fff;
    padding: 0 15px;
    height: 80px;
    position: relative;
    z-index: 99;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.18);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.home_hero {
    background-image: linear-gradient(-225deg,#419fde 0,#b57ad9 100%);
    text-align: center;
    /* height: 640px; */
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}
[class*=" icofont-"], [class^=icofont-] {
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    line-height: 1;
}
.icofont-ads-container {
  border-top: 1px solid #efefef;
}
.icofont-ads-c {
  height: 270px;
  width: 100%;
  position: relative;
}
.gwd-page-wrapper {
  width: 100%;
  height: 270px;
  background-color: #fff;
  position: absolute;
  overflow: hidden;
}
.gwd-page-content {
  width: 100%;
  height: 270px;
  background: transparent;
  position: absolute;
  perspective: 1400px;
}
.gwd-image-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 270px;
}
.gwd-image-1 img {
  height: 100%;
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.animation-holder {
  position: relative;
  display: flex;
  width: 100%;
  height: 270px;
  justify-content: space-between;
}

.animation-holder .left-section {
  flex: 1;
  position: relative;
}
.animation-holder .middle-section {
  width: 450px;
  z-index: 99;
}
.animation-holder .right-section {
  width: 500px;
  position: relative;
}
.gwd-image {
  display: inline-block;
}
.gwd-image-sbqb {
  position: absolute;
  top: 101px;
  left: 50%;
}
a, a:focus, a:hover,...