JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="container">
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="facebook"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="info"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="contacto"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="telefono"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="galeria"></a>
    </div>
</div>

CSS

.container {
    height:90%;
    position:fixed;
    top:5%;
    left:5%;

}
.container .wrap {
    
    position: relative; 
    padding-top:100%;
    margin-bottom: 10%;
    width:100%;
    
}
.container .dummy {
    margin-right: 100%;
}
.container a {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
.container>div:last-child {
    margin-bottom: 0;
}

JavaScript

squarethem();

window.onresize= function() {
    squarethem();
}
function squarethem() {
    var height = window.innerHeight;
var menu = document.getElementById("container");
menu.style.width=height/6 +"px";
                      }