JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
            <div id="top">
                <div class="container-fluid text-center">
                    <div id="top-rectangle" class="midSection">
                            <p>
                            Hello, text and text.
                            </p>
                            <p>
                            More text
                            </p>
                    </div>
                </div>
            </div>
</div>

CSS

body {
        height: 100%;
        margin: 0;
}
#wrapper {
        display: table;
        width: 100%;
}
#top {
        height: 0;
        display: table-row;
        vertical-align: middle;
}
#top-rectangle {
        height: 450px;
        width: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}
.midSection {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}