JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<footer class="background: #ccc;">

  <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;">
    <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>
        <rect id="a" width="16" height="1.5" rx=".75"></rect>
        <rect id="b" width="16" height="1.5" y="5" rx=".75"></rect>
        <rect id="c" width="16" height="1.5" y="10" rx=".75"></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 33 33">
        <path fill="#FFF" fill-rule="evenodd" d="M0 16.5C0 7.387 7.387 0 16.5 0S33 7.387 33 16.5 25.613 33 16.5 33 0 25.613 0 16.5zm17.974...

CSS

svg:not(:root) {
    overflow: hidden;
}

svg.icon {
    height: 100%;
}

svg {
    display: block;
    pointer-events: none;
    width: 100%;
}

ul {padding:0;}
a {    display: inline-block;
    line-height: 1.6;
    color: #333;
    text-decoration: underline;}
    
    .clearfix:after, .clearfix:before  {
      content: "";
    display: table;
    }

*, :after, :before {
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}




/* //////////////////////////////////////////////////////////////////////// */


.footer-container p {
  margin:0;
  padding:0;
}
.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%;
   ...