お洒落で即使えそうなCSS　その１

.sp-primary {
  background-color: #428BCA;
  color: #FFFFFF;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
}

/*サクセスメッセージ*/
.sp-success {
  background-color: #DFF0D8;
  color: #000;
  border-color: #D6E9C6;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
}

/*インフォメッセージ*/
.sp-info {
  background-color: #D9EDF7;
  color: #000;
  border-color: #BCE8F1;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
}

/*注意メッセージ*/
.sp-warning {
  background-color: #FCF8E3;
  color: #000;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
  border-color: #FAEBCC;
}

/*警告メッセージ*/
.sp-danger {
  background-color: #F2DEDE;
  color: #000;
  border-color: #EBCCD1;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
}

<div class="sp-primary">プライマリー</div>
<div class="sp-success">さくせす</div>
<div class="sp-info">インフォ</div>
<div class="sp-warning">ウォーニング</div>
<div class="sp-danger">デンジャー</div>