JSFiddle - React, Tailwind, and code Playground

by hendrikdegraaf

HTML

<div class="app">
  <div>
    An app with kittens
  </div>
  <img src="https://placekitten.com/408/287" alt="">
</div>
<div class="overlay">
  <div class="alert">
    This is rendered from the alert layer
  </div>
</div>
<div class="overlay">
  <div class="blocking">
    This is rendered from the blocking layer
    <div class="modal">
      This is a modal
      <div class="normal">
        Some normal content
      </div>
      <div class="select">
        Select
        <div class="select-dropdown">
          Select dropdown
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.app {
  background: blue;
  min-height: 100vh;
}

.overlay {
  position: fixed;
  min-width: 100vw;
  min-height: 100vh;
  top: 0;
  left: 0;
}

.blocking {
  width: 100vw;
  height: 100vh;
  padding-top: 2em;
  color: white;
}

.modal {
  color: black;
  top: 50vh;
  left: 50vw;
  width: 50vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  position: absolute;
  background: red;
}

.normal {
  width: 50%;
  height: 50%;
  background: yellow;
  
}

.alert {
  width: 50%;
  height: 50%;
  position: relative;
  background: magenta;
}

.select {
  width: 50%;
  height: 50%;
  position: relative;
  background: green;
}

.select-dropdown {
  position: absolute;
  bottom: -10%;
  width: 50%;
  height: 50%;
  background: purple;
}