JSFiddle - React, Tailwind, and code Playground

by criptkiller

HTML

<div class="msg msg-ok">
    <p>Ok!</p>
</div>
<div class="msg msg-erro">
    <p>Erro Porra!</p>
</div>
<div class="msg msg-warn">
    <p>Aviso</p>
</div>
<div class="msg msg-info">
    <p>Aviso</p>
</div>

CSS

div { 
    border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}

.msg {
    border-radius:5px;
    border:1px solid;
    margin:0 0 15px 0;
    padding: 8px 10px 0 10px;
    text-shadow:white 1px 1px 0;
}

.msg p {
     margin: 0 0 8px 0;
     padding-left: 25px;   
}

.msg.msg-ok {
    border-color:#A6D877;
    background:#D2ECBA;
    color: #333;
    
}

.msg-ok p {
 background: url("http://lab.bulant.cz/templates/boxie-admin/css/img/led-ico/accept.png") 0 50% no-repeat;
}

.msg.msg-erro {
    border-color:#f3ABAB;
    background:#F9c9c9;
    color: #333;
}

.msg-erro p {
 background:url("http://lab.bulant.cz/templates/boxie-admin/css/img/led-ico/cross_octagon.png") 0 50% no-repeat;   
}

.msg.msg-warn {
    border-color:#D7E059;
    background:#F3F7AA;
    color: #333;
}

.msg-warn p {
 background:url("http://lab.bulant.cz/templates/boxie-admin/css/img/led-ico/exclamation_octagon_fram.png") 0 50% no-repeat;   
}

.msg.msg-info {
    border-color:#9Fd1f5;
    background:#C3E6FF;
    color: #333;
}

.msg-info p {
 background:url("http://lab.bulant.cz/templates/boxie-admin/css/img/led-ico/exclamation.png") 0 50% no-repeat;   
}