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;
    border-width: 4px;
    border-style: solid;
}
#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:border .4s ease-out;
}
.outline:hover {
    border:4px inset white;
}