JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<header>
    header content
</header>
<div class="contents">
This area is only here for the sake of making some height and creating scroll bar...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...<br>
    brah brah brah...
</div>

<div id="pagetop">
    <p><a href="#top">Page Top</a></p>
<div>
    
<footer>
    <div id="bottom">
footer content goes here...
    </div>
</footer>

CSS

header,
.contents,
#pagetop,
#bottom {
    width: 340px;
    margin: 0 auto;
}
header {
    background: #ccddfc;
    padding: 10px 0;
}
.contents {
    border: 3px solid #ccc;
     box-sizing: border-box;
    -moz-box-sizeing: border-box;
    -webkit-box-sizing: border-box;
}
#pagetop {
    padding-top: 10px;
}
#pagetop p {
    margin: 0 0 0 250px;
    width:60px;
    height: 60px;
    background: url(http://placekitten.com/g/60/60) no-repeat;
}
#pagetop a {
    display:block;
    height: 38px;
    border: 1px solid #00f;
    text-indent: -999em;
}
footer {
    margin-top: -20px;
    height: 120px;
    background-color: rgba(160,160,200,.8);
}