JSFiddle - React, Tailwind, and code Playground

by ian_smithz

CSS

.home-page .hp-topdeals-takeover .banner-mg-wrap,
.home-page .hp-topdeals-takeover .banner-mg-wrap img,
.home-page .hp-screwfixlive-fri-takeover .banner-mg-wrap,
.home-page .hp-screwfixlive-fri-takeover .banner-mg-wrap img {
  height: 200px
}

.home-page .full_width_banner .hp-topdeals-takeover {
  background-color: #00a9a0
}

.home-page .full_width_banner .hp-screwfixlive-fri-takeover {
  background-color: #0053a0
}

.home-page .hp-screwfixlive-takeover .banner-mg-wrap,
.home-page .hp-screwfixlive-takeover .banner-mg-wrap img {
  height: 300px
}

.home-page .full_width_banner .hp-screwfixlive-takeover {
  background-color: #0053a0;
  height: 300px;
  margin-bottom: 20px
}

.home-page .hp-kudox-radiators-hw .banner--half .banner__img-align {
  left: 30%
}

.home-page .hp-lap-battens-hw .banner--half .banner__img-align {
  left: 39%
}

.home-page .hp-mk-cu-hw .banner--half .banner__img-align {
  left: 38%
}

.home-page .hp-downlight-bulk-buy-hw .banner--half .banner__img-align {
  left: 33%
}

.home-page .hp-baxi-bundle-hw .banner--half .banner__img-align {
  left: 33%
}

.home-page .hp-baxi-800-hw .banner--half .banner__img-align {
  left: 39%
}

.home-page .hp-nest-hw .banner--half .banner__img-align {
  left: 30%
}

.home-page .skinny-banner .banner-mg-wrap {
  height: 108px;
  border: 1px solid #d1d1d1
}

.home-page .skinny-banner .banner-mg-wrap img {
  height: 88px
}

.home-page .skinny-banner .banner-mg-wrap a {
  border: 9px solid #fff;
}

.home-page .skinny-banner {
  margin: 0 -.3em;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2)
}

.home-page .skinny-banner .banner-mg-wrap {
  background: url(https://cdn-eu-ec.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.1c6/images/general/assets/gfx/autumntwo_header_bg.jpg?yocs=n_s_&yoloc=eu) center center no-repeat
}

.home-page .hp-autumnone {
  margin: 0 -.3em;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2)
}

.home-page .hp-autumnone .banner-mg-wrap {
 ...