JSFiddle - React, Tailwind, and code Playground

by Lars de Jonge

HTML

<body>
		<div id="content">
			<div class="head-text">My latest work</div>
				<div class="b1"> </div>
				<div class="b2"> </div>
				<div class="b3"><p><h3>Aangenaamklassiek</h3>
					Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
				</div>

			<div class="box-text">Text wont go down.</div>
				<div id="work">
					<div class="box-left-img">
						<div class="box-left-text">
							Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>	
					<div class="box-right-img">
						<div class="box-right-text">
							Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>
				
		
					<div class="box-left-img">
							<div class="box-left-text">
								Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>	
					<div class="box-right-img">
						<div class="box-right-text">
							Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>
					
					
					<div class="box-left-img">
						<div class="box-left-text">
							Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>	
					<div class="box-right-img">
						<div class="box-right-text">
							Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
					</div>
				
				
				
				</div>
		</div>
	</body>

CSS

body {
	background-color: #efede7;
	line-height: 1.5;
}

#content{
	width: 962px;
	margin: 0 auto;	
}

.head-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #000;
	font-size: 1.5em;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 50px 0 20px 0;
	text-align: center;
}

.b1 {
	background-image: url(http://larsdejonge.nl/portfolio/img/jot.jpg);
	height: 290px;
	width: 470px;
	float: left;
}

.b2 {
	background-image: url(http://larsdejonge.nl/portfolio/img/not.jpg);
	height: 600px;
	width: 470px;
	float: right;
}

.b3 {
	background-color: #fff;
	color: #6d6f6f;
	margin-top: 20px;
	height: 250px;
	width: 430px;
	padding: 20px;
	float: left;
	font-size: 1.0625em;
	font-family: 'ProximaNova', sans-serif;
	box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #545454;
	font-size: 1.25em;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.box-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #000;
	font-size: 1.5em;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 50px;
	text-align: center;
}

#work {
	width: 962px;
	margin: 0 auto;
}

.box-left-img {
	width: 470px;
	height: 290px;
	float: left;
	background-image: url(http://larsdejonge.nl/portfolio/img/dekroon.jpg);
	background-color: #fff;
}

	.box-left-text {
		width: 430px;
		height: 100px;
		color: #6d6f6f;
		background-color: #fff;
		margin-top: 290px;
		margin-bottom: 50px;
		padding: 20px;
		float: left;
		font-size: 1.0625em;
		font-family: 'Montserrat', sans-serif;
		box-shadow: 1px 1px 1px rgba(0,0,0,.1);
	}

.box-right-img {
	width: 470px;
	height: 290px;
	float: right;
	background-image: url(http://larsdejonge.nl/portfolio/img/fcu.jpg);
	background-color: #fff;
}

	.box-right-text {
		width: 430px;
		height: 100px;
		color: #6d6f6f;
		background-color: #fff;
		margin-top: 290px;
		margin-bottom: 50px;
		padding: 20px;
		float: left;
		font-size:...