JSFiddle - React, Tailwind, and code Playground

by grippstick

HTML

<div class="r-drawer">
  <div class="r-drawer-content">
    <div class="popupContainer">

      <!--
        The height and width of the window is defined in the dasboard.js
    -->
      <div id="contentPopup" class="pop-wrapper" data-bind="visibility: loaded" style="">
        <div class="pop-content">
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <h2>Edit Dashboard
          </h2>
          <br>
          <div class="pop-spacing progressContainer" data-bind="showProgress: showProgress">
            <span title="" class="k-widget k-dropdown k-header dropdown no-label" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" style="width: 100%;" aria-busy="false"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Select a Component...</span>
            <span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span>
            </span><select class="dropdown no-label" style="width: 100%; display: none;" data-role="dropdownlist" data-bind="value: selectedComponent, source: dsAvailableDashboardComponents, events: { select: selectComponent }" data-auto-bind="false" data-option-label="Select a Component..."
              data-text-field="Name" data-value-field="ID"><option value="" selected="selected">Select a Component...</option><option value="11">Announcements</option><option value="10">My Priorities Overview</option><option value="1">My Tasks</option><option value="6">My Top...

CSS

html {
  box-sizing: border-box;
  overflow: hidden;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  background: @backGround;
  display: flex;
  flex-direction: column;
}

.r-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  border: red solid;
}

.r-drawer .r-drawer-content {
  position: absolute;
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1);
  will-change: transform;
  border: solid Blue;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

.popupContainer {
  height: 100%;
  border: yellow solid;
}

.pop-wrapper {
  display:flex;
  flex-direction: column;
  height: 100%;
  border: black solid;
  overflow:hidden;
}

.pop-content {
  padding: 50px 30px 20px 30px;
  border: salmon solid;
  overflow-y:auto;
  flex-grow:1;
}

.button-footer {
  flex-grow:0;
  flex-shrink:0;
  border: turquoise solid;
}