JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id='nw' class='outline'>
      <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
      <p class='titletext'>News</p>
    </div>
    <div id='sw'>
      <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
      <p class='titletext'>Events</p>
    </div>
  </body>

CSS

body {
	height:97.54%;
	width:98.8%;
	background-color:#0C0C0B;
}
#nw {
	background-image:url('clevelandnight.jpg');
	position:absolute;
	height:50%;
	width:49%;
	background-size:cover;
	border-radius:10px;
}
#ne {
	background-image:url('news2.jpg');
	position:absolute;
	background-size:cover;
	height:50%;
	width:49.4%;
	left:50%;
	border-radius:10px;
}
#sw {
	background-image:url('drinks1.jpg');
	position:absolute;
	background-size:cover;
	height:46.5%;
	width:49%;
	top:52.15%;
	border-radius:10px;
}
#se {
	background-image:url('clevelandday.jpg');
	position:absolute;
	background-size:cover;
	height:46.5%;
	width:49.4%;
	left:50%;
	top:52.15%;
	border-radius:10px;
}
.titletext {
	text-align:center;
	margin:0;
	font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
}
.outline {
	transition:outline .4s ease-out;
}
.outline:hover {
	outline:4px inset white;
}