JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    Web App Template
</header>
<div id="wrapper">
    <div id="scroll-content">
        <ul>
        <li>Some Stuff</li>
        <li>More Stuff</li>
        <li>Big Stuff</li>
        <li><input type="text"></li>
        <li>Geek Stuff</li>
        <li>Nerd Stuff</li>
        <li>Fast Stuff</li>
        <li>Slow Stuff</li>
        <li>Good Stuff</li>
        <li>Bad Stuff</li>
        <li>Your Stuff</li>
        <li>My Stuff</li>
        <li>Their Stuff</li>
        <li>Our Stuff</li>
        <li>Super Stuff</li>
        <li>Uber Stuff</li>
        <li>Stuff Stuff</li>
        <li>French Stuff</li>
        <li>German Stuff</li>
        <li>English Stuff</li>
        <li>American Stuff</li>
        <li>Stuff</li>
    </ul>
    </div>
</div>
<footer>
    Some Footer Content
</footer>

CSS

body,ul,li {
    padding:0;
    margin:0;
    border:0;
}
 
body {
    font-family:helvetica;
}
 
header{
 background-color:#deb500;
    position:fixed;
    z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    padding:0;
}
 
footer {
   background-color:#c27b00;
    position:fixed;
    z-index:2;
    bottom:0; left:0;
    width:100%;
    height:48px;
    padding:0;
    border-top:1px solid #444;
}
 
header, footer{
    font-size:20px;
    text-align:center;
    color:#f3f3f3;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    line-height:45px;
}
 
#wrapper {
  z-index:1;
    width:100%;
    background:#aaa;
}
 
#scroll-content {
position:absolute;
    top:0;
    z-index:1;
    width:100%;
    padding:0;
    -webkit-overflow-scrolling:touch;
    overflow:auto;
}
 
ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}
 
li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}