JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="lightsout">
  <div class="modal-wrapper">
    <div class="modal">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo iure aperiam quae ea voluptatum corrupti.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt cumque dolorem quia, quidem pariatur earum molestias beatae numquam expedita adipisci accusamus quam debitis, quo...

CSS

.lightsout {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
  overflow: auto;
}

.modal-wrapper {
  margin-top: auto;
  margin-bottom: auto;
  background-color: transparent;
  padding: 100px;
}

.modal {
  background-color: #fff;
}