JSFiddle - React, Tailwind, and code Playground

by Danielle Keane

HTML

<div class="hire-range-cat-container"> 
	<div id="hire-range-single-rt"> 
		<div class="hire-range-banner"> 
			<h1>Refrigerated Trailers</h1> 
			<div class="three-usp-cont">
			<div class="single-usp-cont">
				<div id="single-usp">
					<p>USP 1</p>
				</div>
				</div>
				<div class="single-usp-cont">
				<div id="single-usp">
					<p>USP 2</p>
				</div>
				</div>
				<div class="single-usp-cont">
				<div id="single-usp">
					<p>USP 2</p>
				</div>
				</div>
			</div>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
			<button><a href="">Find out more</a></button>
		</div>
	</div>
	<div class="same-height-boxes">
	<div id="hire-range-double-co">
		<div class="hire-range-banner-large">
			<h1>Cooling</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
			<button><a href="">Find out more</a></button>
		</div>
	</div>
	<div id="hire-range-double-he">
		<div class="hire-range-banner-small">
			<h1>Heating</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
			<button><a href="">Find out more</a></button>
		</div>
	</div>
	</div>
  </div>

CSS

.hire-range-cat-container {
  text-align: center;
}

.hire-range-banner h1 {
	margin-bottom: 30px;
}

.hire-range-banner p, .hire-range-banner-large p, .hire-range-banner-small p {
	font-size: 16px;
	font-weight: 300;
	color: black;
	margin: 0;
}

#hire-range-single-rt {
	background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Refrigerated-Trailer-Background.jpg);
}

#hire-range-double-co {
	background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Cooling-Background.jpg);
	width: 70%;
	margin-right: 50px;
}

#hire-range-double-he {
	background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Heating-Background.jpg);
	width: 30%;
}

#hire-range-single-rt, #hire-range-double-co, #hire-range-double-he {
	background-size: cover;
	padding: 6%;
	display: inline-block;
}

.same-height-boxes {
	display: flex;
	flex: 1;
	margin-top: 50px;
}

.three-usp-cont {
	margin-bottom: 30px;
}

.single-usp-cont {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}
.three-usp {
	display: table;
	margin: 0 auto;
}

#single-usp { 
	width: 100px; 
	height: 100px; 
	text-align: center; 
	background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/reACTIVECM-Temperature-Control-Roundel.png);
	background-size: cover;
	display: table-cell;
  vertical-align: middle;
}

#single-usp p {
	color: white;
}

.hire-range-banner button, .hire-range-banner-large button, .hire-range-banner-small button {
	margin-top: 30px;
}