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">
             <h2>Post Title Example One</h2>	
            <p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
        </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;
}
footer {
}
#c {
    position: fixed;
    height: 25px;
    bottom: 0;
    width: 100%;
    background-color: green;
}