JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
  <div class='top'>상단</div>
  <div class='middle'>중단</div>
  <div class='bottom'>하단</div>
</div>

CSS

#box {margin:100px auto 0; width:260px; height:240px; border-radius:3px; background:red; display:table-cell;}
 
#box .top {margin:20px auto 0; width:230px; color:white; text-align:center; line-height:50px; height:50px; background:#b90000}
#box .middle {margin:20px auto 0; width:230px; color:white; text-align:center; line-height:50px;height:50px; background:#b90000; clear:both;}
#box .bottom {margin:20px auto 0; width:230px; color:white; text-align:center; line-height:50px;height:50px; background:#b90000}