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

/* defaut css set for orientation: portrait , see mediaquerie to override some of them */
.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;
}
@media all and (orientation:landscape) {
    .container {
        width:90%;
        position:fixed;
        top: auto;
        bottom:5%;
        left:5%;
        height:auto;
        width:90%!important;/* overwrites javascript rules */
    }
    .container .wrap {
        float:left;
        position: relative;
        width: 18.4%;
        margin-right: 2%;
        padding-top:18.4%;
        margin-bottom:0;;
        float:left;
    }
    .container>div:last-child {
        margin-right: 0;
    }
}

JavaScript

squarethem();

window.onresize = function () {
    squarethem();
}

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