JSFiddle - React, Tailwind, and code Playground

by alexche8

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>box-model</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div class="outer">
<div class="box">

<p>The box model describes the physical properties of each element on your page. Margins, borders, padding, and content all make up an element's box. In this case, the inner div tag's margins can be seen with the blue color, the border is black, the padding is represented by orange, and the element's width and height are yellow.
</p>
</div>
</div>
</body>
</html>

CSS

aside, article, section, header, footer, nav {
    display: block;
}
div, p {
    margin: 0;
    padding:0;
}
html {
    background: #ccc;
}
.outer {
    width: 400px;
    height: 600px;
    margin: 0 auto;
    background: #9CF;
    padding: 1px;
}
.box{
    width: 300px;
    height: 300px;
    background: black;
    padding: 25px;

}
p {
    background: #EEA458;
    height: 100%;
}
    
/*add styles here*/