JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<div class="modal">
  <header>Header</header>
  <div class="content">
    <div class="input-field">
      <div class="calendar">This is calendar</div>
    </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, consequat nisl ut, pulvinar risus. Sed non porttitor nunc, vel facilisis neque.</p>
  </div>
  <footer>Footer</footer>
</div>

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;
}

.input-field {
  /*
  All input fields in Materialize have position absolute.
  That makes calendar impossible to stick out of the view.
  Try commenting it out to see what will happen.
  */
  /* position: relative; */
}

.calendar {
  position: absolute;
  left: 100px;
  width: 300px;
  height: 400px;
  padding: 1em;
  background: rgba(0,0,0,0.75);
  color: #ffffff;
  border: 1px solid #646464;
  box-sizing: border-box;
  text-align: justify;
  z-index: 9999;
}

p {
  padding: 1em;
  text-align: justify;
}