JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
            <div class="middle">
                <div class="innie">
                    <span class="title">
                        Timothy Eldon
                    </span>
                    <br/>
                    <span class="subtitle">
                        Author
                    </span>
                    <br/>
                    <span class="subnote">
                        (amateur)
                    </span>
                </div>
            </div>
        </div>

CSS

.title {
        font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
        font-size: 400%;
    }
    
    .subtitle {
        font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
        font-size: 150%;
    }
    
    .subnote {
        font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
        font-size: 75%;
    }
    
    .outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
        background:url('https://placeimg.com/600/300/any')no-repeat;
        background-position: center;
    }
    
    .middle {
        display: table-cell;
        vertical-align: middle;
    }
    
    .innie {
        text-align: center;
    }