JSFiddle - React, Tailwind, and code Playground

HTML

<body class="main">
  <div>
    Main content
  </div>
  <div class="popup-background">
   <div class="popup-foreground">
     <div class="popup">
       <div class="popup-header">
         header
       </div>
       <div class="popup-content">
         <div class="content">
            ghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg df
         </div>
       </div>
       <div class="popup-footer">
         footer
       </div>
     </div>
   </div>
  </div>
</body>

SCSS

.main {
  // Represents the main content of the web page
  background: grey;
  height: 100%;
  width: 100%;
}

.popup-background {
  // Represents the background to "darken" the main content
 	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
	justify-content: space-around;
	align-items: center;
  
  .popup-foreground {
    // Represents the popup foreground aka, the maximum space the popup is "allowed" to occupy
    position: absolute;
		height: calc(100% - 120px);
		width: calc(100% - 200px);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    .popup {   
      // This is the actual popup
      display: flex;
      flex-direction: column;
      background: grey;
      padding: 10px;
      
      .popup-header {
        background: red;
      }
      .popup-content {
        background: green;
        
        .content {
          overflow-y: auto;
        }
      }
      .popup-footer {
        background: blue;
      }
    }
  }
}