JSFiddle - React, Tailwind, and code Playground

by js_test

HTML

<div class="panels">
    <div class="container">
        <div class="panel">
            <img src="https://placehold.it/654x654/FF0000/FF0000" /> <a href="#">link</a>

        </div>
        <div class="panel">
            <img src="https://placehold.it/654x654/FFFF00/FFFF00" /> <a href="#">link</a>

        </div>
        <div class="panel">
            <img src="https://placehold.it/654x654/0000ff/0000ff" /> <a href="#">link</a>

        </div>
    </div>

SCSS

.panels {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    .container {
        width: 100%;
        display: table;
        width: 100%;
        table-layout: fixed;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .panel {
        display: table-cell;
        width: 33.33333%;
        height: 498px;
        width: 33.33333333%;
        overflow: hidden;
        position: relative;
        background-color: #151515;
        img {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            display: block;
            height: auto;
        }
        a {
            border: 3px solid white;
            color: white;
            text-decoration: none;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.36);
            font-family:"Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
            font-size: 18px;
            left: 50%;
            padding: 30px 18px;
            position: absolute;
            z-index: 2;
        }
    }
}