JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header>
<p>Welcome</p>
</header>
<main>
<p>Bacon ipsum dolor amet tongue id nulla, proident magna beef cillum sunt. Jerky ham non, frankfurter ut culpa kielbasa chicken in ground round. Bresaola tri-tip ut t-bone minim bacon beef kevin lorem do. Chicken aute cupidatat short loin landjaeger. Tri-tip short loin nostrud, venison pastrami pancetta capicola adipisicing cow excepteur anim. Proident beef ribs picanha elit sausage, flank sint strip steak filet mignon magna occaecat hamburger kevin pariatur non.</p>
<p>Tri-tip culpa consectetur beef picanha sed cow doner lorem anim qui ribeye. Aliqua cupim cillum ut chuck aute spare ribs aliquip shank irure sausage. Cow alcatra jerky veniam, tempor voluptate kielbasa pig shoulder sint qui shankle brisket commodo. Ham sed landjaeger cupim rump sirloin quis officia. Ball tip salami prosciutto shoulder eu, short loin est. Shoulder rump commodo chuck short loin bacon strip steak exercitation.</p>
<p>Meatloaf kielbasa aute flank. Dolor enim cillum fugiat. Eiusmod mollit spare ribs, proident ad cupim short loin brisket. Officia consectetur drumstick, anim fatback lorem venison proident tri-tip meatball sed adipisicing nulla laboris porchetta. Dolor eiusmod aliqua landjaeger ham hock, pork chop flank pig. Tempor in sunt magna cupim bresaola brisket officia beef ribs spare ribs.</p>
<p>Excepteur deserunt leberkas ipsum chuck. Culpa deserunt id, andouille turkey ut chicken picanha. Commodo quis turkey, ham proident consequat spare ribs exercitation ut fatback sint. Magna laborum nulla kevin, sint chicken ribeye tenderloin tongue short ribs picanha culpa pork belly shank meatball.</p>
<p>Ea sint sausage, ut incididunt turkey turducken. Eiusmod meatloaf do sed voluptate ad nulla in biltong aliqua. Capicola aliqua commodo eiusmod duis prosciutto. Pork officia ad qui pork chop strip steak tri-tip. Aliqua exercitation non nulla ham hock. Eu tempor cupidatat sint.</p>
<p>Lorem commodo pork chop...
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
/**
* Non-essential styling
*/
body {
font-family: monospace;
line-height: 1.5;
color: #555;
background-color: #fff;
}
body > * {
padding: 10px 15px;
}
header,
footer {
background-color: #ddd;
text-align: center;
}