JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="popup" cdkDragLockAxis="y" cdkDrag>
  <div class="header">Title</div>
  <div class="body">
 


The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. RackhamThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. RackhamThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact o reproduced in their exact original form, 
  </div>
  <div class="footer"> 
    <div class=button>OK</div>
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  height:100%;
  width:100%;
}
body {
  background-color: #666666; 
}
.popup {
   background-color: #ffffff;
   width: 520px;
   border-radius: 3px;
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: 100vh;
   box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
   


}
.header {
     background-color: #AAAAAA;
     color: #ffffff;
     height: 20px;
     line-height: 20px;
     padding: 10px;
     border-radius: 3px 3px 0 0;

}
.body {
  padding: 30px 30px 0 30px;
  overflow: hidden;
  /*max-height: 78vh;*/
  max-height: calc(100vh - 296px);
  overflow-y: auto;
}
.footer {
  padding: 30px;
  text-align: right;
}
.button {
  height: 36px;
  border: 1px solid #cccccc;
  line-height: 36px;
  padding: 0 12px;
  display: inline-block;
  border-radius: 3px;
}