JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blink">
  <span>1</span>
</div>

CSS

html, body{
  width: 100%;
}

@keyframe cus-blink{
  0%   {opacity: 1; margin-top: 0px;}
  50%  {opacity: 0.3; margin-top: -3px;}
  100% {opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes cus-blink{
  0%   {opacity: 1; margin-top: 0px;}
  50%  {opacity: 0.3; margin-top: -3px;}
  100% {opacity: 1; margin-top: 0px;}
}

@-moz-keyframes cus-blink{
  0%   {opacity: 1; margin-top: 0px;}
  50%  {opacity: 0.3; margin-top: -3px;}
  100% {opacity: 1; margin-top: 0px;}
}

@-o-keyframes cus-blink{
  0%   {opacity: 1; margin-top: 0px;}
  50%  {opacity: 0.3; margin-top: -3px;}
  100% {opacity: 1; margin-top: 0px;}
}

.blink{
  background-color: #f00;
  width: 30px;
  height: 30px;
  position: fixed;
  top: 20px;
  left: 20px;
  color: #fff;
  line-height: 30px;
  -webkit-animation: cus-blink 2s infinite;
  -moz-animation:    cus-blink 2s infinite;
  -o-animation:      cus-blink 2s infinite;
  animation:         cus-blink 2s infinite;
}