JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<!-- 
This is a comment! That's why it does not show up in the results.

Name your container div whatever you want! page-wrap is common and makes sense because.. well.. it wraps your page. 

By the way: I have no clue what a "master stylesheet" is!
-->

<div class="page-wrap">
    Hi! I am in a container div with a class of "page-wrap". I am centered because i have a css property of "margin:auto". This applies automatic margin to both of my sides to keep me in the center. Remember- I need a width otherwise I will not center. Standard width is 960px.
</div>

CSS

body {
    background:#eefdff;
    line-height:25px;
    font-size:16px;
    color:#fff;
    text-shadow:0px 0px 5px #013d43;
}
.page-wrap {
    background:#027a86;
    border:2px solid #011f22;
    margin:auto; /* this is the magic */
    margin-top:50px;
    padding:25px; /* this affects how much distance is between the content of this div and the edge of it */
    width:300px; /* would not center without a width */
}

JavaScript

//No javascript needed for this one!