JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

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 fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg df 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 fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg df ghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg...

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 {
        padding:10px 15px;
      
        background: green;
        
        .content {
        
          max-height:145px;
          overflow-y: auto;
        }
      }
      .popup-footer {
        background: blue;
      }
    }
  }
}