JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="notice-border">
    <h1>Everything is A OK!</h1>
    <p class="status green">ONLINE</p>
</div>

<div class="notice-border">
    <h1>Trying to connect all active timers!</h1>
    <p class="status orange">CONNECTING</p>
</div>
    
<div class="notice-border">
    <h1>Server is responding with error XXXX</h1>
    <p class="status red">OFFLINE</p>
</div>

CSS

.notice-border {
-moz-border-radius:10px 10px 10px 10px;
background:none repeat scroll 0 0 #FFFFFF;
border:5px solid #ccc;
color:#333333;
margin:20px 20px 30px 20px;
padding:10px;
position:relative;
font:normal normal normal 13px/150% Arial,Verdana,monospace,sans-serif;
}
.notice-border:before {
border-color:#ccc transparent transparent;
border-right:20px solid transparent;
border-style:solid;
border-width:20px;
bottom:-40px;
content:"";
display:block;
height:0;
left:40px;
position:absolute;
width:0;
}
.notice-border:after {
border-color:#FFFFFF transparent transparent;
border-right:13px solid transparent;
border-style:solid;
border-width:13px;
bottom:-26px;
content:"";
display:block;
height:0;
right:47px;
position:absolute;
width:0;
}
.notice-border:before {
border-color:transparent transparent #ccc;
border-style:solid;
border-width:20px;
bottom:auto;
left:auto;
left:40px;
top:-40px;
}
.notice-border:after {
border-color:transparent transparent #FFFFFF;
border-style:solid;
border-width:13px;
bottom:auto;
right:auto;
left:47px;
top:-26px;
}
.notice-border .status {
float: none;
text-align: right;
clear: both;
margin: 0;
font-size: 11px;
}

.notice-border .status.red { color: #f00; }
.notice-border .status.green { color: #0f0; }
.notice-border .status.orange { color: orange; }