JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="mt-4 d-flex justify-content-around">
  <button class="btn btn-outline-secondary" data-ddpage-open="dd-page-payments">Payments</button>
  <button class="btn btn-outline-secondary" data-ddpage-open="dd-page-copy">Copy</button>
</div>

<!-- pop-ups -->
<div class="dd-page" data-ddpage="dd-page-payments" id="ddPageEx1">
  <header class="dd-page-header">
    <h5 class="dd-page-title">Header Title ex1</h5>
    <button class="close close-dd-page" data-ddpage-close="dd-page-payments"><span>×</span></button>
  </header>
  <main class="dd-page-content">
    <p>Content ex1</p>
  </main>
  <footer class="dd-page-footer">
    <div class="dd-page-footer-content">
      <p>Footer content ex1</p>
      <button class="btn btn-sm btn-danger close-dd-page" data-ddpage-close="dd-page-payments">Close pop-up</button>
    </div>
  </footer>
</div>

<div class="dd-page" data-ddpage="dd-page-copy" id="ddPageEx2">
  <header class="dd-page-header">
    <h5 class="dd-page-title">Header Title ex2</h5>
    <button class="close close-dd-page" data-ddpage-close="dd-page-copy"><span>×</span></button>
  </header>
  <main class="dd-page-content">
    <p>Content ex2</p>
  </main>
  <footer class="dd-page-footer">
    <div class="dd-page-footer-content">
      <p>Footer content ex2</p>
      <button class="btn btn-sm btn-danger close-dd-page" data-ddpage-close="dd-page-copy">Close pop-up</button>
    </div>
  </footer>
</div>

CSS

body.dd-page-opened {
  overflow: hidden;
}

.dd-page {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 1001;
  top: -100%;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

.dd-page.open {
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.dd-page-header {
  flex: 0 0 auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: #f6f8fa;
  border-bottom: 1px solid #dde3e3;
}

.dd-page-content {
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;
  padding: 20px 30px 0px;
}

.dd-page-footer {
  flex: 0 0 auto;
  z-index: 1;
  background: #666666;
  border-top: 1px solid silver;
  padding: 10px 30px;
}

.dd-page-footer-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dd-page-footer-nav .btn+.btn-group,
.dd-page-footer-nav .btn+.btn {
  margin-left: 15px;
}

.dd-page-footer-nav .btn-group .btn {
  margin-left: 0;
}

.no-arrow.dropdown-toggle::after {
  display: none;
}

.dd-page-footer-nav .btn.btn-primary.dropdown-toggle:hover:after {
  color: white;
}

.dd-page-footer-nav .btn.btn-primary.dropdown-toggle:hover {
  background: #5bcafc;
}

.dd-page-footer-nav .dropup .dropdown-menu .dropdown-item:hover {
  color: #16b4fc;
}

.dd-page-footer-nav .dropup .dropdown-menu .dropdown-item {
  color: #5f5f5f;
  padding-top: 0;
  padding-bottom: 0;
}

.dd-page-title {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 0;
}

.dd-page-header .close {
  opacity: 0.85;
  font-weight: 100;
  font-size: 50px;
  line-height: 16px;
}

.dd-page-header .close:hover {
  color: black;
  opacity: 1;
}

@media (max-width:576px) {
  .dd-date-picker-holder.block-sm {
    width: 100%;
   ...

JavaScript

$(function() {
  //open dd-page
  $('[data-ddpage-open]').on('click', function(e) {
    var thisDdPage = jQuery(this).attr('data-ddpage-open');
    $('.dd-page[data-ddpage="' + thisDdPage + '"]').addClass("open");
    e.preventDefault();
  });
  //close dd-page
  $('[data-ddpage-close]').on('click', function(e) {
    var thisDdPage = jQuery(this).attr('data-ddpage-close');
    $('.dd-page[data-ddpage="' + thisDdPage + '"]').removeClass("open");
    e.preventDefault();
  });
});