JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='loader-message-box'>
  <div class='loader-message'>
    <div class='loader'>
    
    </div>
  </div>
  <div class='vertical-mid-hack'>
  </div>
</div>
<div class='message-box'>
  <div class='message'>
    message
  </div>
  <div class='vertical-bot-hack'>
  
  </div>
</div>

CSS

body, html {
  height: 100%;
  margin: 0;
}
.loader-message-box {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
}
.loader-message {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}
.vertical-mid-hack {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
  height: 100%;
}
.vertical-bot-hack {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 -2px;
  height: 100%;
}
.loader {
  width: 100px;
  height: 100px;
  background-color: teal;
  border-radius: 100px;
  margin: 0 auto;
}
.message-box {
  position: fixed;
  height: 100%;
  width: 100%;
  text-align: center;
}
.message {
  display: inline-block;
  background-color: white;
  border-radius: 3px;
  font-family: arial;
  padding: 20px 0;
  vertical-align: bottom;
}