<section role="group">
  <div class="success" role="alert">
    This is a important message of success!
  </div>
  <div class="warning" role="alert">
    This is a important warning message!
  </div>
  <div class="danger" role="alert">
    This is a important danger message!
  </div>
</section>
section {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

div {
  padding: 0.5em;
  border-radius: 4px;
  font-size: 1.2em;
}

.success {
  background: green;
  color: white;
}

.warning {
  background: orange;
  color: #2c2c2c;
}

.danger {
  border: 1px solid red;
  color: #141414;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.