JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<div>
  <span class="tasks1">56</span>
</div>

</br>

<div>
  <div class="tasks2">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/81862-200.png" alt="">
    <span class="notif"></span>
  </div>
</div>

CSS

/* CSS for option 1 */
.tasks1 {
  display: inline-block;
  border-radius: 15px;
  background: #f00;
  border: solid 2px #900;
  color: #fff;
  padding: 2px;
  width: 20px;
  height: 20px;
  text-align: center;
}


/* CSS for option 2 */
.tasks2 {
  position: relative;
  display: inline-block;
  width: 25px;
}

.tasks2 img {
  width: 25px;
  height: 25px;
}

.tasks2 .notif {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 10px;
  background: #f00;
  border: solid 2px #900;
  color: #fff;
  padding: 2px;
  width: 3px;
  height: 3px;
  text-align: center;
}