JSFiddle - React, Tailwind, and code Playground

by Raphael Quintao

HTML

<link rel="stylesheet" href="https://skin.casino/css/libs/font-awesome.min.css">
<div id="QNotify-Holder">
  <div class="QNotify-Item info" style="">
    <div class="message">Test</div>
    <div class="bar"></div>
    <div class="btn-close"></div>
  </div>
</div>

CSS

#QNotify-Holder {
  /*background-color: #ff9900;*/
  position: fixed;
  left: 0px;
  bottom: 0px;
  /*width: 500px;*/
  z-index: 999999;
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  /*align-items: end;*/
  /*align-content: end;*/
}

.QNotify-Item {
  border-radius: 4px;
  overflow: hidden;
  margin: 0 10px 10px 10px;
  color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 5px;
  min-width: 250px;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.QNotify-Item:before {
  font-family: FontAwesome, sans-serif;
  content: "\f129";
  /*background-color: black;*/
  font-size: 2em;
  text-align: center;
  flex: 1 1.2em;
  align-self: center;
}

.QNotify-Item.info {
  background-color: #2196F3;
}

.QNotify-Item.error {
  background-color: #f44336;
}

.QNotify-Item.success {
  background-color: #4CAF50;
}

.QNotify-Item.warning {
  background-color: #ff9800;
}

.QNotify-Item.info:before {
  content: "\f129";
}

.QNotify-Item.error:before {
  content: "\f12a";
}

.QNotify-Item.success:before {
  content: "\f00c";
}

.QNotify-Item.warning:before {
  content: "\f12a";
}

.QNotify-Item .title {
  font-weight: bold;
  padding: 0.4em 1em;
  padding-bottom: 0;
}

.QNotify-Item .message {
  padding: 0.4em 1em;
  font-size: 0.9em;
  flex: 1 100%;
  white-space: pre;
}

.QNotify-Item .bar {
  background: rebeccapurple;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  //display: none;
}

.QNotify-Item .btn-close {
  background: rebeccapurple;
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  //display: none;
}

.QNotify-Item .btn-close:before {
 content: 'X';
}