JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <dl>
            <dt>Item 1</dt>
            <dt>Item 2</dt>
            <dt>Item 3</dt>
            <dt>Item 4</dt>
        </dl>
    </div>
</body>

CSS

div {
        position: absolute;
        text-align: center;
        width: 50%;
        left: 25%;
        top: 50%;
        border-width: 4px;
        border-style: groove;
        transform: translateY(-50%);
    }