JSFiddle - React, Tailwind, and code Playground

HTML

<center>
    <div class="diamond">
        <div class="row">
            <a href="#"><div class="square"><p>Erk?</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>Erk?</p></div></a>
            <a href="#"><div class="square red"><p>Erk?</p></div></a>
            <a href="#"><div class="square"><p>Erk?</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>Erk?</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Erk?</p></div></a>
        </div>
    </div>
</center>

CSS

body {
    background:black;
    color:#000000;
    font:13px georgia, serif;
    line-height:1.4;
    font-weight: lighter;
    text-rendering: optimizelegibility;
}
.diamond {
    padding-top: 50px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

.square {
    background-color: white;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    width: 50px;
}

.square:hover {
    background-color: green;
}

.square p {
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

.red {
    background-color: red;
}