JSFiddle - React, Tailwind, and code Playground

HTML

<div class="features">
<div class="firstFeatureLine">
		<div class="firstLeft">
			<div id="cultureNews" class="outerbox">
                <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews.jpg" />
				<div id="featuresTitle">
					Culture News
				</div>
			</div>
		</div>
		<div class="firstRight">
			<div id="firstRightUp">
				<div id="portfolio" class="outerbox">
				<img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
					<div id="featuresTitle">
						Portfolio
					</div>
				</div>
			</div>
			<div id="firstRightDown">
				<div id="culturenews1" class="outerbox">
				<img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews 1.jpg" />
					<div id="featuresTitle">
						Culture News
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="secondFeatureLine">
		<div class="secondLeft">
			<div id="portfolio1" class="outerbox">
				<img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
				<div id="featuresTitle">
					Portfolio
				</div>
			</div>
		</div>
		
		<div class="secondRight">
			<div id="school" class="outerbox">
				<img src="http://www.lookouch.com/www/assets/newImages/home/modulos/school.jpg" />
				<div id="featuresTitle">
					School
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.features {
	width: 100%;
	height: 100%;
	background-color: #1a1a1a;
	margin-top: 10%;
	margin-bottom: 10%;
}

#featuresTitle {
	color: #ffffff;
	background-color: #6000ff;
	padding: 5px 5px 5px 5px;
	position: absolute;
	font-family: Montserrat;
	font-size: 13px;
	display: inline-block;
	top: 0;
	left: 0;
}

.firstFeatureLine { 
	min-width: 20px;
	min-height: 20px;
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}

.firstFeatureLine .firstLeft {
	width: 60%;
	height: 100%;
	display: inline-block;
	position: relative;
}

.firstFeatureLine .firstLeft #cultureNews {}
.firstFeatureLine .firstLeft #cultureNews img { width: 100%; }

.firstFeatureLine .firstRight {
	width: 35%;
	height: 100%;
	display: inline-block;
	position: absolute;
}
.firstFeatureLine .firstRight #firstRightUp {
	width: 100%;
	height: 50%;
	position: relative;
}
.firstFeatureLine .firstRight #firstRightUp #portfolio {}
.firstFeatureLine .firstRight #firstRightUp #portfolio img { width: 100%; }

.firstFeatureLine .firstRight #firstRightDown {
	width: 100%;
	height: 50%;
	position: relative;
}
.firstFeatureLine .firstRight #firstRightDown #culturenews1 {}
.firstFeatureLine .firstRight #firstRightDown #culturenews1 img { width: 100%; }

.secondFeatureLine {
	min-width: 20px;
	min-height: 20px;
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}

.secondFeatureLine .secondLeft {
	width: 35%;
	height: 100%;
	display: inline-block;
	position: relative;
}

.secondFeatureLine .secondLeft #portfolio1 {}
.secondFeatureLine .secondLeft #portfolio1 img { width: 100%; }

.secondFeatureLine .secondRight {
	width: 60%;
	height: 100%;
	display: inline-block;
	position: relative;
}

.secondFeatureLine .secondRight #school {}
.secondFeatureLine .secondRight #school img  { width: 100%; }