JSFiddle - React, Tailwind, and code Playground

by Roman Duchoň

HTML

<body class="flexbox-radky">
        <div id="zahlavi">
            <h1>ZÁHLAVÍ</h1>
        </div>
        <div class="flexbox-sloupce">
            <div id="menu">
                <ul>
                    <li>Odkaz1</li>
                    <li>Odkaz2</li>
                    <li>Odkaz3</li>
                </ul>
            </div>
            <div id="obsah">
                obsah

            </div>
        </div>
        <div class="zapati">
            Zápatí
        </div>

    </body>

CSS

body {
    max-width: 90%;
    margin: auto;
    height: 100vh;

}
.flexbox-radky {
    display: flex;
    flex-direction: column;
}
.flexbox-sloupce {
    flex: 1;
    display: flex;
    background-color: #DDDDDD;
}
#zahlavi    {
    background-color: red;
    min-height: 10%;
}
#menu {
    flex: 1;
}

#obsah {
    flex: 3;
}
.zapati {
    flex: none;
    background-color: brown;
}