JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<div class="modal">
  <header>Header</header>
  <div class="content">
    <div class="calendar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus pulvinar sollicitudin. Aenean at sagittis mauris, vitae hendrerit nulla. Donec suscipit eget nisl vel eleifend. Suspendisse potenti. Sed iaculis viverra porta. Suspendisse et auctor orci, eu maximus justo. Nunc aliquet mattis cursus. Proin eu vulputate magna.</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum felis, vulputate non auctor at, accumsan non tortor. Vivamus ultricies diam at elit laoreet vestibulum. Nunc ullamcorper viverra lectus, at suscipit orci laoreet in. Proin dolor ligula, tempus et dapibus ac, eleifend nec ex. Sed semper est ac dapibus iaculis. Donec magna sapien, consectetur ac leo at, finibus blandit justo. Ut vel rutrum nunc, at suscipit mauris. Donec sit amet lorem luctus, consequat nisl ut, pulvinar risus. Sed non porttitor nunc, vel facilisis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum felis, vulputate non auctor at, accumsan non tortor. Vivamus ultricies diam at elit laoreet vestibulum. Nunc ullamcorper viverra lectus, at suscipit orci laoreet in. Proin dolor ligula, tempus et dapibus ac, eleifend nec ex. Sed semper est ac dapibus iaculis. Donec magna sapien, consectetur ac leo at, finibus blandit justo. Ut vel rutrum nunc, at suscipit mauris. Donec sit amet lorem luctus, consequat nisl ut, pulvinar risus. Sed non porttitor nunc, vel facilisis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum felis, vulputate non auctor at, accumsan non tortor. Vivamus ultricies diam at elit laoreet vestibulum. Nunc ullamcorper viverra lectus, at suscipit orci laoreet in. Proin dolor ligula, tempus et dapibus ac, eleifend nec ex. Sed semper est ac dapibus iaculis. Donec magna sapien, consectetur ac leo at, finibus blandit justo. Ut vel rutrum nunc, at suscipit mauris. Donec sit amet lorem luctus,...

CSS

.modal {
  position: fixed;
  top: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 60px;
  line-height: 60px;
  padding: 0 1em;
  box-sizing: border-box;
}

header {
  border-bottom: 1px solid #c8c8c8;
}

footer {
  border-top: 1px solid #c8c8c8;
}

.content {
  flex-grow: 1;
  overflow-y: scroll;
}

.calendar {
  position: absolute;
  left: 100px;
  width: 200px;
  height: 400px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #646464;
}

p {
  padding: 1em;
}