JSFiddle - React, Tailwind, and code Playground

by Chuck Tornton

HTML

<header>
        <a href="">1 пункт</a>
        <a href="">2 пункт</a>
        <a href="">3 пункт</a>
        <a href="">4 пункт</a>
        <a href="">5 пункт</a>
        <a href="">6 пункт</a>
        <a href="">7 пункт</a>
    </header>
    <main>

    </main>
    <div class="prefooter"></div>
    <footer>
    </footer>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

}

header {
    background: violet;
    width: 100%;
    height: 60px;
    float: left;
}

main {
    min-height: calc(100% - 160px);
    width: 100%;
    background: darkgrey;
    float: left;
}

.qube {
    float: left;
    width: 300px;
    height: 300px;
    margin: 10px;
    background: black;
}



footer {
    height: 100px;
    width: 100%;
    background: black;
    color: #fff;
    float: left;
}