<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
<div class="notifications">
  
  <div class="notify gr">
    <div class="circle">
      <i class="icon-ok"></i>
    </div>
    <div class="info">
      <span>Download Complete</span>
      <span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
    </div> 
  </div> 
  
  <div class="notify rd">
    <div class="circle">
      <i class="icon-ok"></i>
    </div>
    <div class="info">
      <span>Download Complete</span>
      <span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
    </div>  
  </div>
  
  <div class="notify or">
    <div class="circle">
      <i class="icon-ok"></i>
    </div>
    <div class="info">
      <span>Download Complete</span>
      <span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
    </div> 
  </div>
  
  <div class="notify bl">
    <div class="circle">
      <i class="icon-ok"></i>
    </div>
    <div class="info">
      <span>Download Complete</span>
      <span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
    </div> 
  </div>
</div> 
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

$dblue: hsl(202, 56%, 30%);
$green: hsl(143, 51%, 45%);
$white: hsl(0, 0%, 96%);
$red: hsl(12, 85%, 47%);
$orange: hsl(24, 54%, 53%);

body {
  background-color: $dblue;
  font-family: 'Open Sans', sans-serif;
}
.notifications {
  position: absolute;
  right: 10px;
  top: 10px;
}
.notify {
  width: 300px;
  height: 70px;
  background-color: $white;
  border-radius: 7px;
  box-shadow: 0 1px 4px darken($dblue, 5%); 
  overflow: hidden;
  cursor: pointer;
  margin: 10px 0;
}
.notify:first-child {
  margin: 0 0 10px 0;
}
.circle {
  width: 28px;
  height: 20px;
  display: block;
  border-radius: 100%;
  transform: translate(17px, 17px);
  
  color: $white;
  padding: 10px 0 10px 13px;
}
.gr > .circle { background-color: $green; }
.gr > .info span:first-child { color: $green; }
.rd > .circle { background-color: $red; }
.rd > .info span:first-child { color: $red; }
.or > .circle { background-color: $orange; }
.or > .info span:first-child { color: $orange; }
.bl > .circle { background-color: $dblue; }
.bl > .info span:first-child { color: $dblue; }
.info {
  width: 230px; 
  height: 70px;
  transform: translate(70px, -35px);
  
  padding: 10px;
}
.info span:first-child {
  display: block;
  
  color: $green;
  font-weight: 600;
  font-size: 15px;
}
.info span:last-child {
  color: hsl(0, 0%, 57%);
  font-size: 13px;
}
.info span a {
  color: hsl(0, 0%, 33%);
  text-decoration: none;
  font-weight: 600;
}
View Compiled
$('.notify').click( function() {
  $(this).fadeOut();
});   

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js