JSFiddle - React, Tailwind, and code Playground

by Alberto Naperi Jr.

HTML

<div class="wrapper">
    <a class="anchor anchorx" href="#" style="background-image: url(http://static.hdw.eweb4.com/media/wallpapers_dl/1/106/1058184-beautiful-landscapes.jpg);">
        <span class="span-container">
            <span class="span-one">SPAN ONE</span>
            <span class="span-two">SPAN TWO</span>
        </span>
    </a>
    <a class="anchor anchorx" href="#" style="background-image: url(http://static.hdw.eweb4.com/media/wallpapers_dl/1/106/1058184-beautiful-landscapes.jpg);">
        <span class="span-container">
            <span class="span-one">SPAN ONE</span>
            <span class="span-two">SPAN TWO</span>
        </span>
    </a>
    <a class="anchor anchorx" href="#" style="background-image: url(http://static.hdw.eweb4.com/media/wallpapers_dl/1/106/1058184-beautiful-landscapes.jpg);">
        <span class="span-container">
            <span class="span-one">SPAN ONE</span>
            <span class="span-two">SPAN TWO</span>
        </span>
    </a>
    <a class="anchor anchorx" href="#" style="background-image: url(http://static.hdw.eweb4.com/media/wallpapers_dl/1/106/1058184-beautiful-landscapes.jpg);">
        <span class="span-container">
            <span class="span-one">SPAN ONE</span>
            <span class="span-two">SPAN TWO</span>
        </span>
    </a>
    <a class="anchor anchorx" href="#" style="background-image: url(http://static.hdw.eweb4.com/media/wallpapers_dl/1/106/1058184-beautiful-landscapes.jpg);">
        <span class="span-container">
            <span class="span-one">SPAN ONE</span>
            <span class="span-two">SPAN TWO</span>
        </span>
    </a>
</div>

CSS

.wrapper {
    position:relative;
    width:90%;
    max-width:90%;
    margin: 0px auto;
    left:0px;
    right:0px;
    text-align: center;
}

.anchor {
    position: relative;
    display: inline-block;
    width: 24%;
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

.span-container {
    position: absolute;
    left: 10%;
    bottom: 10%;
    width: 80%;
}

.span-one {
    font-size: 271.579%;
    color: #FFF;
}

.span-two {
    font-size: 214.737%;
    color: #FFF;
    font-weight: 100;
    line-height: 0.9;
}