JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">

    <div id="aka">
    <h1 class="middle">赤</h1>
    </div>

    <div id="ao">
    <h2 class="middle">青</h2>
    </div>

    <div id="midori">
    <h2 class="middle">緑</h2>
    </div>

    <div id="iro">
    <h2 class="middle">好きな色</h2>
    </div>

CSS

#body{
    width: 1000px;
    text-align: center;
    margin-left:auto;margin-right:auto;
    text-align:left;
}

#aka{
    width: 1000px;
    height: 300px;
    background-color: #ff0000;
    text-align: center;
    margin-left:auto;margin-right:auto;
    display:table-cell;
    vertical-align: middle;
}

#ao{
    width: 600px;
    height: 500px;
    background-color: #0000ff;
    text-align: center;
    margin-left:auto;margin-right:auto;
    float:left
}

#midori{
    width: 400px;
    height: 500px;
    background-color: #008000;
    text-align: center;
    margin-left:auto;margin-right:auto;
    float:right
}

#iro{
    width: 1000px;
    height: 300px;
    background-color: #00bfff;
    text-align: center;
    margin-left:auto;margin-right:auto;
    display:table-cell;
    vertical-align: middle;
    clear: right;
    clear: left;
}

.middle{

}