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;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}