JSFiddle - React, Tailwind, and code Playground
HTML
<div id="contenit">
<a class="homelink" href="#"><div id="Blocco1"> <p class="homemenu">Gomme in Casa</p></div></a>
<a class="homelink" href="#"><div id="Blocco2"> <p class="homemenu">Gomme in Deposito</p></div></a>
<a class="homelink" href="#"><div id="Blocco3"> <p class="homemenu">Admin</p></div></a>
<a class="homelink" href="#"><div id="Blocco4"> <p class="homemenu">Prova</p></div></a>
</div>
CSS
html, body {
height: 100%; /* queste due sono essenziali */
width: 100%;
overflow: hidden; /* o vedi tu che valore dare - conviene in questo caso definire l'overflow */
}
#contenit {
height: 100%; /* queste due sono essenziali */
width: 100%;
position: absolute; /* o anche relative */
overflow: hidden;
background: white; /* questo e` per le prove */
}
#contenit div {
position: absolute;
width: 30%; /* supponendoli grandi uguali */
height: 30%;
background: blue;
}
#Blocco1 {
left: 11%; /* un terzo dello spazio libero dai blocchi */
top: 8%;
text-align: center;
}
#Blocco2 {
left: 55%;
top: 8%;
text-align: center;
}
#Blocco3 {
left: 11%;
top: 55%;
text-align: center;
}
#Blocco4 {
left: 55%;
top: 55%;
text-align: center;
}
.homemenu p {
color: white;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
p {position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}