CSS Notivications (dimissable)

notivications.css

.n {
  border: 1px solid;
  border-color: rgba(0,0,0,1);
  background-color: rgba(0,0,0,0.3);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 30px 30px;
  color: rgba(0,0,0,1);

  padding: 10px 10px 10px 50px;
  margin: 5px 0px 15px 0px;
}
.n-error {
  background-image: url("https://www.helpnetsecurity.com/wp-content/uploads/2015/12/error.png");
  border-color: rgba(255,0,0,1);
  background-color: rgba(255,0,0,0.3);
}
.n-info {
  background-image: url("http://www.wdzscheveningen.nl/content/13637/news/clnt/3567209_1_org.png");
  border-color: rgba(0,0,255,1);
  background-color: rgba(0,0,255,0.3);
}
.n-warn {
  background-image: url("http://trypophobia.com/wp-content/uploads/2012/03/warning1.png");
  border-color: rgba(255,255,0,1);
  background-color: rgba(255,255,0,0.3);
}
.n-succes {
  background-image: url("https://pixabay.com/static/uploads/photo/2012/04/18/19/01/check-37583_960_720.png");
  border-color: rgba(0,255,0,1);
  background-color: rgba(0,255,0,0.3);
}

notivications.html

<div class="n">Empty!</div>
<div class="n">
  <b>Empty!</b><br />
  This is a multi-line empty!<br />
  Another line!
</div>

<hr />

<div class="n n-error">Error!</div>
<div class="n n-error">
  <b>Error!</b><br />
  This is a multi-line error!<br />
  Another line!
</div>

<hr />

<div class="n n-info">Info!</div>
<div class="n n-info">
  <b>Info!</b><br />
  This is a multi-line info!<br />
  Another line!
</div>

<hr />

<div class="n n-warn">Warning!</div>
<div class="n n-warn">
  <b>Warning!</b><br />
  This is a multi-line warning!<br />
  Another line!
</div>

<hr />

<div class="n n-succes">Succes!</div>
<div class="n n-succes">
  <b>Succes!</b><br />
  This is a multi-line succes!<br />
  Another line!
</div>

notivications.js

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.className.indexOf("n") > -1)
      target.style.display = 'none';
}, false);