JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<i data-count="99" class="far fa-sticky-note"></i>

<i data-count="99" class="far fa-sticky-note fa-2x"></i>

<i data-count="99" class="far fa-sticky-note fa-3x"></i>

<i data-count="99" class="far fa-sticky-note fa-4x"></i>

CSS

[data-count]::after {
  content: attr(data-count);
  font-size: min(max(1em - 5vw), 0.8rem);
  width: 1.2em;
  height: 1.2em;
  background-color: red;
  padding: .333rem;
  border-radius: 1rem;
  transform: translate(calc(-0.7em - 0.4rem), calc(-0.2rem - 0.4em));
  position: absolute;
  color: white;
  font-family: sans-serif;
  line-height: 1.4;
}