JSFiddle - React, Tailwind, and code Playground
by ian_smithz
CSS
/*AUTUMN SALE starts*/
.home-page .hp-makitatwinpack .banner__deal-save, .home-page .hp-makitatwinpack .banner__deal-text {
color: #fff200;
}
.home-page .hp-makitatwinpack .banner__deal-value {
color: #fff;
}
.home-page .hp-makitatwinpack .banner--var3 .banner__deal {
border-bottom: 9px solid #000;
}
.home-page .hp-makitatwinpack .banner--var3 .banner__img-align {
left: 37%;
}
/*AUTUMN SALE ends*/
.home-page .fudmain {
margin-bottom: 30px;
}
/*10 day deals= Take Over*/
.home-page .full_width_banner .header-tendaydeals {
background-color: #000;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
height: 295px;
}
.home-page .header-tendaydeals h1 {
font: 145px/110px screwfix_betaheavy;
text-align: center;
text-transform: uppercase;
color: #fff200;
padding-top: 28px;
padding-bottom: 18px;
margin: 0;
}
.home-page .header-tendaydeals h2 {
font: 46px/50px screwfix_betaheavy;
text-align: center;
text-transform: none;
color: #fff;
}
.home-page .banner--var3 .banner__deal {
color: #ed1c24
}
.home-page .hp-erbauer .banner--var3 .banner__deal,
.home-page .hp-macallister .banner--var3 .banner__deal {
background: #fff;
}
.home-page .hp-erbauer .banner__img-align {
left: 25%;
bottom: -3%;
}
.home-page .hp-macallister .banner__img-align {
left: 27%;
}
/*md-Up*/
@media only screen and (max-width: 64em) and (min-width: 40.063em) {
/*AUTUMN SALE md starts*/
.home-page .hp-makitatwinpack .banner--var3 .banner__deal {
height: 105px;
}
.home-page .hp-makitatwinpack .banner--var3 .banner__text {
width: 40%;
}
.home-page .hp-makitatwinpack .banner--var3 .banner__img-align {
left: 43%;
}
/*AUTUMN SALE ends*/
.home-page .full_width_banner .header-tendaydeals {
height: 275px;
}
.home-page .header-tendaydeals h1 {
font: 100px/88px...
JavaScript
v