<section>
  <span class="badge success">Success</span>
  <span class="badge warning">Warning</span>
  <span class="badge danger">Danger</span>
  <span class="badge info">Info</span>
</section>
section {
  padding: 20px  
}

.badge {
  padding: 0.3em 0.6em;
  border-radius: 1em;
  color: white;
  font-weight: bold;
  font-size: inherit;
}

.success {
  background-color: #1e7e34;
}

.warning {
  background-color: #ffc107;
  color: #393939;
}

.danger {
  background-color: #dc3545;
}

.info {
  background-color: #17a2b8;
  color: #2c2c2c;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.