JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget">
    <div class="widget-body">
        <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus diam, faucibus sed fermentum at, volutpat non tellus. Aliquam erat volutpat. Curabitur ac tortor nibh. Donec semper erat et nulla feugiat tincidunt. Cras in tristique ligula. Phasellus at ipsum quam. Proin ultricies, est id interdum gravida, erat nibh mattis arcu, et tempus tortor felis non nunc. Aliquam nec dolor sapien, eu tincidunt urna. Nullam posuere vulputate sem a interdum.</div>
    </div>
    <div class="widget-header">Header
    </div>
    <div class="widget-footer">
        Footer
    </div>
</div>

CSS

body,html{
    height:100%;
}
.widget {
    margin:0 auto;
    width: 300px;
    height:100%;
    position: relative;
    min-height: 10px;
}
.widget-body {
    background: #fbfbfc;
    height: 100%;
}
.widget-header {
    background: #f6f6f6;
    border-bottom: solid 1px #f0f0f0;
    height: 40px;
    position: absolute;
    top: 0;
    width: 100%;
}
.widget-footer {
    background: #f6f6f6;
    border-top: solid 1px #f0f0f0;
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;    
}
.center {
    position:absolute;
    width:95%;
    margin:45px 5px 35px 5px;
}