JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
	<header>
        <h1 class="name">name</h1>
    </header>
	<nav>
		<a href="index.html">Главная</a>
		<a href="about.html">Услуги</a>
		<a href="projects.html">Галерея</a>
		<a href="contact.html">Контакты</a>
	</nav>
	<section class="content">
		<div class="box abox"><a href="index.html">1</a></div>
		<div class="box bbox"><a href="index.html">2</a></div>
		<div class="box cbox"><a href="index.html">3</a></div>
		<div class="box dbox"><a href="index.html">4</a></div>
	</section>
    <footer>
        <p>Footer</p>
    </footer>

CSS

#page {width: 1000px;margin: 0 auto;padding: 8px 0 0 0;}

header {
	width: 1000px;
	height:50px;
	background: #ccc;
}

nav {
    background: #777;
    height: 50px;
}

section {position: relative;}

footer {margin: 40px 0 100px 0;}

.box {height:80px;
	position: absolute;
}


.abox {
top:0;
left:160px;
width:230px;
background:#dbd700;
}
.bbox {
top:120px;
left:500px;
width:220px;
background:#aec066;
}
.cbox {
top:540px;
left:320px;
width:260px;
background:#5dc0cc;
}
.dbox {
top:530px;
left:715px;
width:230px;
background:#ce4718;
}

.content {
	position: relative;
	height: 1000px;
}

footer {
    background: #ccc;
    height: 50px;
}