JSFiddle - React, Tailwind, and code Playground

by Wiktor Liszkiewicz

HTML

<div class="black">
    <div class="message">
        This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message. This is a popup message.
    </div>
</div>

CSS

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    max-width: 400px;
    top: 25%; bottom: 25%; left: 0%; right: 0%;
}