JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="total">
        <header id="1">
            <div id="a">
                	<h1>Header</h1>

            </div>
        </header>
        <div id="bb">
            <div class="row1 row">
                	<h2>Post Title Example One</h2>	
                <p>height: 33%</p>
            </div>
            <div class="row2 row">
                	<h2>Post Title Example One</h2>	
                <p>height 33%</p>
            </div>
            <div class="row3 row">
                	<h2>Post Title Example One</h2>	
                <p>height 33%</p>
            </div>
        </div>
        <footer id="3">
            <div id="c">
                	<h1>footer</h1>

            </div>
        </footer>
    </div>
</body>

CSS

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
}
header {
}
#a {
    position: fixed;
    height: 50px;
    top: 0;
    width: 100%;
    background-color: blue;
}
#bb {
    position: absolute;
    top:50px;
    bottom:25px;
    width: 2000px;
    background-color: yellow;
}
.row {
    height:33.33%;
    position: relative;
}
.row1 {
    background-color:red;
}
.row2 {
    background-color: white;
}
.row3 {
    background-color: silver;
}
}
footer {
}
#c {
    position: fixed;
    height: 25px;
    bottom: 0;
    width: 100%;
    background-color: green;
}