JSFiddle - React, Tailwind, and code Playground

by ian_smithz

CSS

.promo_block {
	border:1px solid #d1d1d1;
	padding:9px;
	height:350px;
	box-shadow:0 4px 6px -2px rgba(0, 0, 0, .2);
}
/*.promo_block.main_promo {
	padding:0px;
} NO BORDER - comment out border and padding in .promo_block above*/

.sidebar_promo {
	border:1px solid #d1d1d1;
	background-color:#fff;
	height:350px;
	box-shadow:0 4px 6px -2px rgba(0, 0, 0, .2);
	padding:10px;
	margin-bottom:30px;
}
.sidebar_promo.traderated, .sidebar_inner.traderated {
	background-color:#000;
	background-image:none;
}
.sidebar_inner {
	background:url(/media/wysiwyg/sidebar/side_promo_bg-radial.png) #fff no-repeat;
	background-position:bottom right;
	background-size:cover;
	height:328px;
}
.sidebar_header {
	font-family:screwfix_betabold;
	color:#0053a0;
	font-size:40px;
	line-height:1;
	padding:10px 0 10px 15px;
}
.sidebar_promo .text_small {
	font-family:screwfix_betaregular;
	font-size:16px;
	line-height:1.2;
	color:#636363;
	padding:0 15px;
}
.sidebar_promo .text_small.traderated {
	color:#fff;
	text-align:center;
}
.text_small.guarantee {
	margin-top:20px;
}
.traderated_stars {
	text-align:center;
	margin-bottom:14px;
}
.delivery_image {
	margin-top:4%;
}

@media only screen and (max-width:1024px) and (min-width:768px) {
	.sidebar_header {
		font-size:25px;
	}
	.sidebar_inner {
		height:278px;
	}
	.delivery_image {
		margin-top:15%;
	}
}

@media only screen and (max-width:767px) and (min-width:500px) {
	.sidebar_inner {
		height:280px;
	}
}

/* -- PROMO BLOCK ---*/
.promo_msg {
	background:url(/media/wysiwyg/sidebar/sidebar_hotdeals_lg.png);
	background-position:center center;
	height:330px;
	/*height:350px; /*No Border*/
}
@media only screen and (max-width:1024px) and (min-width:768px) {
	.promo_msg {
		background:url(/media/wysiwyg/sidebar/sidebar_hotdeals_md.png);
		background-position:center center;
	}
}
@media only screen and (max-width:767px) and (min-width:500px) {
	.promo_msg...