JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<div id="notify-wrapper"><span style="display: none; " id="notify" class="server-success"><span id="notify-msg">Settings changed successfully.</span></span></div>

<div id="notify-wrapper"><span id="notify" class="server-success"><span id="notify-msg">Settings changed successfully.</span></span></div>

CSS

#notify-wrapper {
width: 100%;
height: 0px;
left: 0;
top: 0;
text-align: center;
position: fixed;
margin-top: 5px;
z-index: 1001;
}

#notify {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3),inset 0 0 0 #000;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 0 0 black;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 0 0 black;
padding: 6px 10px;
font-size: 12px;
display: inline-block;
color: #222;
}

.server-success {
background-color: #C4ECA9;
border: 1px solid #8FDB5C;
}

#notify-wrapper {
text-align: center;
}

#notify {
font-size: 12px;
color: #222;
}