JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="fudwrap">

	<div class="row">

		<div class="lg-24 md-24 sm-24 fudmain">


		 	<div class="lg-9 md-12 sm-24 cols fudblock1">
		 			<a href="https://www.screwfix.com/help/delivery/" target="_blank">FREE DELIVERY OVER £50 <span class="textgrey"> <!--- next day to most of the UK--></span></a>
		 	</div>

		    <div class="lg-8 md-9 sm-24 cols fudblock2">
		    	 	<a href="https://www.screwfix.com/help/clickandcollect/" target="_blank">CLICK &amp; COLLECT <!--<span class="textgrey">in as little as 1 minute</span>--></a>
		    </div>

		 	<div class="lg-7 md-3 sm-24 cols fudblock3">
		 		 	<a href="https://www.screwfix.com/help/disruption" target="_blank">SERVICE UPDATES</a>
		 	</div>

			<div class="lg-7 md-6 sm-24 cols fudblock4">
		 		 	<a href="https://www.screwfixgiftcards.com/" target="_blank">Screwfix Gift Cards <span class="textgrey">a perfect gift</span></a>
		 	</div>

		</div>

	</div>

</div>

CSS

/*
.fudwrap {
    z-index: 3;
}
*/

.fudwrap .fudmain .fudblock4 span.red {
  color:#ed1c24;
}

.sh-header {box-shadow:none;}

.fudblock4 {
  display:none;
}

.sh-header {box-shadow:none;}

@media (max-width: 40em) {

    .fudblock4 {
        display:block;
    } 

    .fudwrap .fudmain .fudblock4 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeD ease 15s infinite;
        -moz-animation: fadeD ease 15s infinite;
        animation: fadeD ease 15s infinite
    }

}







@-webkit-keyframes fadeA {
  0% {
    opacity: 0;
    z-index: -1;
  }

  5%,
  20% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  25% {
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes fadeB {
  0%,
  25% {
    opacity: 0;
    z-index: -1;
  }

  30%,
  45% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  50% {
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes fadeC {
  0%,
  50% {
    opacity: 0;
    z-index: -1;
  }

  55%,
  70% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  75% {
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes fadeD {
  0%,
  75% {
    opacity: 0;
    z-index: -1;
  }

  80%,
  95% {
    opacity: 1;
    z-index: 5;
  }

  100% {
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes fadeA {
  0% {
    opacity: 0;
    z-index: -1;
  }

  5%,
  20% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  25% {
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes fadeB {
  0%,
  25% {
    opacity: 0;
    z-index: -1;
  }

  30%,
  45% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  50% {
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes fadeC {
  0%,
  50% {
    opacity: 0;
    z-index: -1;
  }

  55%,
  70% {
    opacity: 1;
    z-index: 5;
  }

  100%,
  75% {
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes fadeD {
  0%,
  75% {
    opacity: 0;
    z-index: -1;
  }

  80%,
  95% {
    opacity: 1;
    z-index: 5;
  }

  100% {
    opacity: 0;
  ...