JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<body class="">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; display: none;">
    <defs>
        <circle id="ae-circle-path-1" cx="15" cy="15" r="15"></circle>
        <rect id="ae-path-1" x="0" y="0" width="28" height="20"></rect>
        <rect id="calendar-path-1" x="4" y="0" width="4" height="7" rx="1"></rect>
        <rect id="calendar-path-2" x="13" y="0" width="4" height="7" rx="1"></rect>
        <rect id="cn-path-1" x="0" y="0" width="28" height="20"></rect>
        <rect id="gb-path-1" x="0" y="0" width="28" height="20"></rect>
        <polygon id="icn-shopping-path-1" points="0 0 20 0 20 20 0 20"></polygon>
        <rect id="ru-flag-path-1" x="0" y="0" width="28" height="20"></rect>
        <rect id="semi-circle-l-path-1" x="0" y="0" width="13.8125" height="26"></rect>
        <rect id="semi-circle-r-path-1" x="0" y="0" width="13.8125" height="26"></rect>
        <linearGradient x1="0%" x2="100%" id="featureCurve">
            <stop offset="0%" id="FeatureListCurveLeft"></stop>
            <stop offset="100%" id="FeatureListCurveRight"></stop>
        </linearGradient>
        <linearGradient id="mapGradient" x1="0%" x2="94.771%" y1="51.99%" y2="51.99%">
            <stop offset="0%" stop-color="#27263D"></stop>
            <stop offset="65.195%" stop-color="#27263D"></stop>
            <stop offset="100%" stop-color="#27263D" stop-opacity="0"></stop>
        </linearGradient>
    </defs>


    <symbol id="icn-facebook" viewBox="0 0 9 19">
        <path fill="#FFF" fill-rule="evenodd" d="M5.985 18.818h-3.99v-9.41H0V6.165h1.994V4.22C1.994 1.574 3.12 0 6.32 0h2.663v3.244H7.317c-1.245 0-1.327.453-1.327 1.298l-.006 1.623H9l-.353 3.243H5.984v9.41z"></path>
    </symbol>
    <symbol id="icn-youtube" viewBox="0 0 20 14">
        <path fill="#FFF" fill-rule="evenodd" d="M20 10.564V3.436S20 0 16.553 0H3.445S0 0 0 3.436v7.128S0 14 3.445...

SCSS

.fwad-footer {

  .footer-container.component{
    margin:0
  }
  @media (max-width:767px){
    .footer-container.component .footer-container-body-logos.w--content,.footer-container.component .media-gallery-overlay .footer-container-body-logos.overlay-wrapper{
      margin-top:40px
    }
  }
  .footer-container hr{
    margin:0;
    border-top:0;
    opacity:.3
  }
  @media (max-width:767px){
    .footer-container .footer-logo-border{
      display:none
    }
  }
  .footer-container-head{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
  }
  .footer-container-head--rte{
    padding:4.6% 5.3%;
    text-align:center;
    width:100%
  }
  .footer-container-head--rte a{
    color:#fff;
    text-decoration:underline
  }
  .footer-container-head--rte a:hover{
    color:#fff;
    text-decoration:none
  }
  .footer-container-head--rte a:focus,.footer-container-head--rte a:visited{
    outline:0
  }
  @media (min-width:768px){
    .footer-container-head--rte{
      padding:24px 2.5% 24px 3.5%;
      text-align:left;
      width:70%
    }
  }
  @media (min-width:1024px){
    .footer-container-head--rte{
      padding:24px 2.5%
    }
  }
  @media (max-width:767px){
    .footer-container-head--rte{
      padding:10% 5.3%
    }
  }
  .footer-container-head--sign-up-button{
    padding-bottom:5.3%;
    text-align:center;
    width:100%
  }
  .footer-container-head--sign-up-button.btn{
    margin:0
  }
  @media (max-width:767px){
    .footer-container-head--sign-up-button{
      padding-bottom:10%
    }
  }
  @media (min-width:768px){
    .footer-container-head--sign-up-button{
      padding:24px 1.9% 24px 2.5%;
      width:30%
    }
    .footer-container-head--sign-up-button a{
      margin-right:0
    }
  }
  @media (min-width:768px){
    .footer-container-head--sign-up-button{
      text-align:right
    }
  }
  .footer-container-body-links{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
   ...