JSFiddle - React, Tailwind, and code Playground

by Chris Watts

HTML

<section class="container style-1">
		<div class="row">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed faucibus nunc, eu dignissim metus. Nullam mattis dapibus ex, id scelerisque quam venenatis rhoncus. Fusce fermentum, augue sit amet rutrum imperdiet, felis libero volutpat velit, mattis consequat ligula dui in ante. Morbi diam leo, eleifend eu leo eget, vulputate lobortis libero. Morbi ipsum ante, malesuada et fringilla eu, convallis id tellus. Sed vel risus ut magna fringilla scelerisque. Aenean mollis in nulla quis consectetur. Maecenas ut eleifend felis.

			In accumsan dui in magna mollis, ut pretium lacus auctor. Sed fermentum diam fringilla viverra euismod. Fusce in lacus quam. Maecenas at mattis libero. Nullam at ipsum vulputate, mattis nulla eu, sagittis orci. Aliquam fringilla nunc vel ante venenatis commodo. Vivamus sollicitudin eros ligula, quis ornare augue bibendum in. Sed facilisis felis eget risus consectetur, a tristique elit eleifend. Phasellus tempor dignissim elit id tempor. Phasellus pharetra lectus nec magna vehicula, nec condimentum magna mattis. Nullam lobortis, neque id egestas mattis, lorem nisl facilisis est, at faucibus ante turpis et magna. Vivamus id tempor diam. Suspendisse eget tellus arcu. Nunc dapibus a justo ut tristique.</p>
		</div>
	</section>
	<section class="container style-2">
		<div class="row">
			<div class="col-1">
				<p>In accumsan dui in magna mollis, ut pretium lacus auctor. Sed fermentum diam fringilla viverra euismod. Fusce in lacus quam. Maecenas at mattis libero. Nullam at ipsum vulputate, mattis nulla eu, sagittis orci. Aliquam fringilla nunc vel ante venenatis commodo. Vivamus sollicitudin eros ligula, quis ornare augue bibendum in. Sed facilisis felis eget risus consectetur, a tristique elit eleifend. Phasellus tempor dignissim elit id tempor. Phasellus pharetra lectus nec magna vehicula, nec condimentum magna mattis. Nullam lobortis, neque id egestas mattis, lorem nisl facilisis...

CSS

body {
			margin: 0px;
		}

		.container {
			width: 100%;
		}

		.row {
			max-width: 600px;
			margin: 0 auto;

			background-color: #ffff00;
		}

		.col-1, .col-2 {
			height: 300px;

			display: inline-block;
			float: left;
		}

		.col-1 {
			width: 40%;

			background-color: #00ffff;
		}

		.col-2 {
			width: 60%;

			background-color: #ff0000;
		}

		.style-1 {
			padding: 100px 0 200px;

			background-image: url(http://lorempixel.com/1200/800/);
			background-size: cover;
		}

		.style-2 {
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
			background-repeat: repeat-y;
			background-position: 40% 0; 
		}

		.style-2:before {
			height: 100px;
			width: 100%;

			margin-top: -100px;
			position: absolute;
			content: '';
			background-image:...