JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="header">
        CSS Recipe
    </div>
    <div class="body">
        일반적인 웹사이트는 타이틀이나 기타 부수적인 정보들로 구성 되어 있는 "header"영역과 사이트에서 다루게될 컨텐츠를 담을 "body"영역과 기타 사이트 하단에 위치시킬 "footer"로 구성 됩니다. 꼭 이런식의 레이아웃으로 구성해야 하는건 아니고 그냥 일반적인 웹사이트의 구성이라는것을 말씀드리며 얼마든지 정보의 성격에 맞는 다양한 레이아웃이 나올 수 있을 것입니다.
    </div>
    <div class="footer">
        by leezche
    </div>
</div>

CSS

.wrap {
    width: 300px;
    margin: 0 auto;
}
div {
    padding: 20px;
}
.header {
    background-color: #ccc;
}
.body {
    background-color: #eee;
}
.footer {
    background-color: #ccc; 
}