JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="wrapper">
    <div id="content">
        <div id="top-padding"></div>
        <div id="stuff">
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
            <p>some content</p>
        </div>
        <div id="bottom-padding"></div>
    </div><!-- content -->
</div><!-- wrapper -->

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    position: relative;
    height: 100%;
}

#content {
    position: relative;
    background-color: #C9E6FF;
    margin: 0 auto;
    width: 300px;
    min-height: 100%;
}

#top-padding {
    background: #fff; 
    height: 15px;
    width: 100%;
}

#bottom-padding {
    background: #fff;
    height: 15px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#stuff {
    padding-bottom: 15px;
    margin-bottom: 15px;
}