JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.ie.screwfix.com/skin/frontend/screwfix/default/css/styles.css?q=1503069010">
<link rel="stylesheet" href="https://www.ie.screwfix.com/skin/frontend/screwfix/default/css/category.css?q=1503068965">
<div class="row cat_banner cat_banner-titandrills">
<a href="//www.ie.screwfix.com/tools/power-tools/drills?manufacturer=Titan" title="Titan Drills From Only €59.95" onclick="ga('send', 'event', 'Category', 'Banner', '131titandrills');">
<div class="cat_banner-outer large-12 small-12 columns"> 
<div class="banner_inner large-12 small-12 columns">
<div class="text_cont columns">
<div class="text_wrap from_promo-msg">
<div class="text_promo-msg ">
<span class="cat_banner-sut">UP TO </span><sup>€</sup>59<sup>.95</sup>
</div>
<div class="text_small">
Titan Drills
</div>
<div class="text_small">
</div>
<div class="text_small">
</div>
</div>
</div>
<div class="banner_chevron columns">
</div>
<div class="main_image columns">
<picture class="hide-above-bpsml">
<img srcset="http://www.ie.screwfix.com/media/wysiwyg/banners/category/cat131/powertools_8282P_sm.png" alt="Titan Drills">
</picture>
 <picture class="show-above-bpsml">
<img srcset="http://www.ie.screwfix.com/media/wysiwyg/banners/category/cat131/powertools_8282P_lg.png" alt="Titan Drills">
</picture>
</div>
<div class="roundel_cont off columns">
<div class="roundel_main">
<div class="roundel_promo-msg">
Only
</div>
<div class="roundel_value">
<sup>€</sup>XX<sup>.XX <span class="inc_vat-msg">inc vat</span></sup>
</div>
<div class="roundel_was-value">
Was €XX.XX
</div>
</div>
</div>
</div>
</div>
</a>
</div>

CSS

.cat_banner.cat_banner-titanvacuums .main_image {
	left:-6%;
}

@media only screen and (max-width: 40em) {
	.cat_banner.cat_banner-titanvacuums .main_image {
		left:-10%;
	}

	.cat_banner-titanvacuums .banner_inner {
		background-image:none !important;
	}	
}

@media only screen and (max-width: 64em) and (min-width: 40.063em) {
	.cat_banner.cat_banner-titanvacuums .main_image {
		left:0%;
	}
}