JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

CSS

.flex-container{
    max-width:80%;
    margin: 100px auto;
    height:600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1E5655
}
.flex-item{
    width:300px;
    height:50px;
    background-color:#fff;
}
.flex-item:nth-of-type(2){
    background-color: #eee;
}
.flex-item:nth-of-type(3){
    background-color: #FFD454;
}
.flex-item:nth-of-type(1){
    align-self: flex-start;
}