JSFiddle - React, Tailwind, and code Playground

HTML

<div class="promo-container">
<div class="overlay">
<div class="outer-promo events-catering-spaces">
<div class="inner-promo">
<h3><a href="/events-and-catering/space/">SPACES</a></h3>
</div>
</div>
</div>
<div class="overlay">
<div class="outer-promo events-catering-occasions">
<div class="inner-promo">
<h3><a href="/events-and-catering/occasions/">OCCASIONS</a></h3>
</div>
</div>
</div>
<div class="overlay">
<div class="outer-promo events-catering-menu">
<div class="inner-promo">
<h3><a href="/menu/">MENU</a></h3>
</div>
</div>
</div>
<div class="overlay">
<div class="outer-promo events-catering-vendors">
<div class="inner-promo">
<h3><a href="/events-and-catering/vendors/">VENDORS</a></h3>
</div>
</div>
</div>
</div>

CSS

.promo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}

.overlay {
    height: 250px;
}

.outer-promo {
    margin-bottom: 25px;
    width: 250px;
    height: 250px;
}

.outer-promo, .description-container {
    border: 1px solid #9A8478;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
}

.outer-promo {
    height: 250px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background-image:url(https://images.pexels.com/photos/313093/pexels-photo-313093.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    background-position:center center;
    position:relative;
}

.inner-promo {
    height: 85%;
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #9A8478;
}

.overlay:hover {
  background-color:black;
  position:relative;
  cursor:pointer;
  opacity:.4;
}