JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

        <div id="container">

            <div class="topbar">
                <div style="float:left;" >Custom Dialog Box</div><div style="text-align: right;">Close</div>
            </div>

            <div id="Text">This is some sample text that will appear here</div>

        </div>

    </div>

CSS

#wrapper {
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

#container {
    background: #FFF;
    left: 50%;
    width: 100%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    height: 100%;
    position: relative;
    display:table;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
    display: table-caption;
}

#Text {
  text-align: center;
    display: table-cell;
    vertical-align: middle;
}