JSFiddle - React, Tailwind, and code Playground

by Tony Frost

HTML

<div class="trans">
  <div class="box">
    <span>Attenzione e roba dentro</span>
  </div>
</div>

<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eligendi magnam cupiditate sunt nobis assumenda, a ipsam ex dolores nisi inventore iste quia dicta, dolore aliquid perspiciatis atque sapiente eius.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis expedita dignissimos fugit ipsa magni minus voluptatum atque, saepe obcaecati inventore blanditiis illum quia corrupti soluta veniam mollitia praesentium itaque ab.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi illum est, reiciendis, aperiam ullam optio porro veniam perferendis tempora quidem sint architecto id dolores! Voluptatibus culpa quibusdam, unde itaque similique.</p>
</section>

CSS

.trans {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  display: block;
  z-index: 1000;
}

.box {
  background-color: #fff;
  box-shadow: 0 0 0 2px #555;
  border-radius: 6px;
  display: table;
  z-index: 1001;
  width: 250px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -90px auto auto -125px;
  text-align: center;
}

.box span {
  display: table-cell;
  vertical-align: middle;
}