JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="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 {
    width:90%;
    position:fixed;
    bottom:5%;
    left:5%;
}
.container .wrap {
    float:left;
    position: relative;
    width: 30%;
    margin-right:1%;
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    float:left;
}
.container .dummy {
    margin-top: 100%;
}
.container a {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
.container>div:last-child {
    margin-right: 0;
}