JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-container">
    <div class="child-container">
        This is vertically centered text!
    </div>
</div>

CSS

.parent-container {
            display: table;
            width: 100%;
            height: 300px;
            background-color: #ff0000;
        }
        
        .child-container {
            display: table-cell;
            vertical-align: middle;
        }