JSFiddle - React, Tailwind, and code Playground

HTML

<div id="#app-notification">
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-danger">alert-danger</div>
</div>

SCSS

.alert {
  padding: 10px;
  margin-bottom: 20px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  background: #fff;
  color: #263f5e;

  &:last-of-type { margin-bottom: 0; }

}

.alert-danger {
  border-bottom: 3px solid #ff3b30;
  strong { color: #ff3b30; }

}

.alert-warning {
  border-bottom: 3px solid #ffcc00;
  strong { color: #ffcc00; }
}

.alert-info {
  border-bottom: 3px solid #007aff;
  strong { color: #007aff; }
}

.last{
  font-weight: bold;
}

JavaScript

$('.alert-danger:last, .alert-info:last, .alert-warning:last').addClass('last');