JSFiddle - React, Tailwind, and code Playground

by Marco Bernardini

HTML

<div id="hd">header</div>
<div id="page">
    
<h1>Literary genres</h1>

    <div id="fields">
        <div id="commands">
            <input type="button" value="SAVE" />
            <p>this part
                <br />has to be
                <br /><b>sticky</b>

            </p>
        </div>
        <div id="genres">
            <div class="g0">
                <div class="g_row1">
                    <div class="g_col1">
                        <div class="g_tit">Adult prose</div>
                        <div class="g_descr">description of this genre</div>
                    </div>
                    <div class="g_but">some
                        <br />buttons
                        <br />to edit</div>
                </div>
                <div class="kids">
                    <div class="g0">
                        <div class="g_row1">
                            <div class="g_col1">
                                <div class="g_tit">Novels</div>
                                <div class="g_descr">description of this genre</div>
                            </div>
                            <div class="g_but">some
                                <br />buttons
                                <br />to edit</div>
                        </div>
                        <div class="kids"></div>
                    </div>
                    <div class="g0">
                        <div class="g_row1">
                            <div class="g_col1">
                                <div class="g_tit">Essays</div>
                                <div class="g_descr">description of this genre</div>
                            </div>
                            <div class="g_but">some
                                <br />buttons
                                <br />to edit</div>
                        </div>
                        <div class="kids"></div>
                    </div>
                    <div class="g0">
                        <div...

CSS

#main {
    position: relative;
}
#hd, #ft {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    height: 3vh;
    padding: 1vh 0 1vh 0;
    background: #cf0;
    text-align: center;
}
#hd {
    top: 0;
    z-index: 99;
}
#ft {
    bottom: 0;
    z-index: 98;
}
#page {
    background: #ff7;
    padding: 4vh 0 4vh 0;
    margin: 0 0 4vh 0;
}
#page h1 {
    color: #900;
    text-align: center;
    border-bottom: 2px solid #900;
}
#fields {
    margin: 0 2vw 0 2vw;
    display: flex;
    flex-flow: row;
    border: 3px dashed #00f;
}
#commands {
    order: 1;
    background: #fc0;
    padding: 1vh 0 1vh 0;
    text-align: center;
}
#genres {
    order: 2;
    display: flex;
    flex: 1 1;
    flex-flow: column;
    background: #608;
    padding: 1vh 0 1vh 0;
}
.g0 {
    display: flex;
    flex: auto;
    flex-flow: column;
    padding: 1vh 1vw 1vh 1vw;
    margin: 1vh 1vw 1vh 1vw;
    border: 3px dashed #f00;
    background: #fff;
}
.g_row1 {
    display: flex;
    flex: auto;
    flex-flow: row;
}
.g_col1 {
    display: flex;
    flex: auto;
    flex-flow: column;
}
.g_tit {
    font-weight: bold;
    font-size: 120%;
    color: #00a;
}
.g_descr {
    font-style: italic;
}
.g_but {
    text-align: center;
    background: #ccc;
}
.kids {
    margin: 3px;
    padding: 3px;
    border: 2px dotted #080;
}