JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <span class="bell fa fa-bell"></span>
  <span class="count">3</span>
</div>

CSS

body {
  background: #333;
  font-family: Helvetica;
}

div {
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.bell {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 5em !important;
  margin: 50px auto 0;
  color: #fff;
}

.count {
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  font-size: 16px;
  background: red;
  color: #fff;
  top: 50px;
  position: absolute;
  line-height: 24px;
}

JavaScript

$(document).ready(() => {
  const $countDiv = $(".count");
  window.setInterval(() => {
    if ($countDiv.css("display") === "block") {
      $countDiv.css("display", "none");
    } else {
      $countDiv.css("display", "inline-block");
    }
  }, 750)
});