JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="logo-number">
<div class="logo"> </div>
<div class="number">
<h3></h3>
</div>
</div>
<div class="home-button-place">
<a class="home-button" href="#"></a>
<a class="home-button" href="#"></a>
<a class="home-button" href="#"></a>
<a class="home-button" href="#"></a>
<a class="home-button" href="#"></a>
</div>
<div class="contacts-body">
<div class="contacts-frame">
<a></a>
</div>
</div>
<footer class="footer">
<div class="footer-address">
<h4>
<br>
</h4>
</div>
<div class="footer-phone">
<h3></h3>
</div>
</footer>
</body>
</html>
CSS
body,html {
height: 100%;
min-height: 100%;
margin-top: 0px;
}
/* header */
.home-button-place {
position: relative;
top: 50px;
left: 170px;
width: 60%;
height: 3%;
}
.home-button {
display:inline-block;
cursor:pointer;
color:#000000;
font-family:arial;
font-size:12px;
padding:7px 20px;
text-decoration:none;
}
.home-button:hover {
background-color:#05a39b;
color: white;
}
.home-button:active {
position:relative;
top:1px;
}
.logo-number {
position: relative;
width: 90%;
height: 10%;
top: 15px;
left: 170px;
}
.number {
width: 40%;
height: 10%;
float: right;
}
.number h3 {
color: #000000;
font-weight: normal;
font-size: 22px;
}
.contacts-body {
width: 75%;
height: 160%;
margin: -134px auto;
background: url('/home.png');
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.contacts-frame {
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
height: 50%;
position: relative;
top: 13.5%;
width: 90%;
}