<section>
  <div class="error badge">
    <div class="title-block">
      <span class="title-block-text">
        Errors
      </span>
    </div>
    123
  </div>

  <div class="warning badge">
    <div class="title-block">
      <span class="title-block-text">
        Warnings
      </span>
    </div>
    45
  </div>

  <div class="good badge">
    <div class="title-block">
      <span class="title-block-text">
        Successes
      </span>
    </div>
    12345
  </div>
</section>

<section>
  <div class="info badge">
    <div class="title-block">
      <span class="title-block-text">
        📩Inbox
      </span>
    </div>
    100
  </div>

  <div class="unicorn badge">
    <div class="title-block">
      <span class="title-block-text">
        🦄Magic
      </span>
    </div>
    100
  </div>

  <div class="royal badge">
    <div class="title-block">
      <span class="title-block-text">
        👑Royalty
      </span>
    </div>
    100
  </div>
</section>

<section>
  <p>
    <div class="gryffindor badge">
      <div class="title-block">
        <span class="title-block-text">
          🦁Gryffindor
        </span>
      </div>
      100
    </div>

    <div class="slytherin badge">
      <div class="title-block">
        <span class="title-block-text">
          🐍Slytherin
        </span>
      </div>
      100
    </div>
  </p>

  <p>
    <div class="hufflepuff badge">
      <div class="title-block">
        <span class="title-block-text">
         🦡 Hufflepuff
        </span>
      </div>
      100
    </div>

    <div class="ravenclaw badge">
      <div class="title-block">
        <span class="title-block-text">
          🦅Ravenclaw
        </span>
      </div>
      100
    </div>
  </p>
</section>
.badge {
  font-family: Futura, "Segoe UI", sans-serif;
  margin: 0.5rem 1.5rem;
  padding-right: 0.25rem;
  display: inline-block;
}
.title-block {
  display: inline-block;
  background: currentcolor;
  padding: 0.5rem;
  text-align: center;
}
.title-block-text {
  color: white;
}

.error { color: red; }
.warning { color: goldenrod; }
.good { color: green; }

.info { color: cornflowerblue; }
.unicorn { color: hotpink; }
.royal { color: rebeccapurple; }

.gryffindor {
  color: crimson;
  background: gold;
}
.hufflepuff {
  color: black;
  background: yellow;
}
.ravenclaw {
  color: royalblue;
  background: peru;
}
.slytherin {
  color: green;
  background: silver;
}

body {
  padding: 1rem;
}
section {
  margin: 0 0 4rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.