JSFiddle - React, Tailwind, and code Playground

HTML

<div class="diamonds diamonds-5e41d5d0-e275-4890-b184-7c741aa67ad0">
    <div class="diamond-row-wrap">
        <div class="diamond-row-upper">
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">
                        <a href="#" class="item"><span class="label">Hello world</span></a>
                    </div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">
                        <a href="#" class="item"><span class="label">Hello world</span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="diamond-row-lower">
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">
                        <a href="#" class="item"><span class="label">Hello world</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.item {
    background-color: #eee;
    display: block;
    width: 100%;
    height: 100%;
}
.label {
    display: none;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.item:hover {
    background-color: #ccc;
}
.item:hover .label {
    display: block;
}



/** Below this line = CSS from diamonds.css **/

.diamonds-5e41d5d0-e275-4890-b184-7c741aa67ad0 .diamond-box-wrap { width: 200px; height: 200px; } .diamonds-5e41d5d0-e275-4890-b184-7c741aa67ad0 .diamond-box { border-width: 5px } 


.diamonds {
    text-align: center;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}
 
.diamond-row-wrap {
    text-align: center;
    position: relative;
    float: left;
    clear: both;
}
.diamond-row-upper, .diamond-row-lower {
    overflow: auto;
    clear: both;
    width: 100%;
}
.diamond-row-lower {
    overflow: visible;
    position: absolute;
    bottom: 0;
}
    .diamond-row-lower .diamond-box {
        margin-left: 64.644660941%; /* 0.5 + 1 / sqrt(2) / 2 */
        margin-top: 64.644660941%;
    }
 
.diamond-box-wrap {
    float: left;
    width: 50%; /* Size of diamonds */
    height: 50%;
}
 
.diamond-box {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
 
    overflow: hidden;
     
    position: relative;
    z-index: 1;
     
    width: 70.710678118%; /* x = sqrt(x^2 / 2) = 1 / sqrt(2) = 0.70710678118 */
    height: 70.710678118%;
    margin: 14.644660941%;
     
    border: 1px solid transparent;
}

.diamond-box-inner {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
 
    -webkit-transform-origin: center center;
   ...