JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="live">
  <div class="bliking"></div>
  <div class="icon"></div>
</div>

CSS

div.live {
  width: 50px;
  height: 32px;
  border: 1px solid #BBB;
  position: relative;
}

div.live > div.bliking {
  width: 7px;
  height: 7px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 5px;
  animation: blinker 1.8s linear infinite;
}

div.live > div.icon {
  width: 100%;
  height: 100%;
  border: 1px solid #333;
}

@keyframes blinker{
  from {opacity: 0;}
  20% {opacity: 1;}
  80% {opacity: 1;}
  to {opacity: 0;}
}
@-webkit-keyframes blinker {
  from {opacity: 0;}
  20% {opacity: 1;}
  80% {opacity: 1;}
  to {opacity: 0;}
}
@-moz-keyframes blinker {
  from {opacity: 0;}
  20% {opacity: 1;}
  80% {opacity: 1;}
  to {opacity: 0;}
}
@-ms-keyframes blinker {
  from {opacity: 0;}
  20% {opacity: 1;}
  80% {opacity: 1;}
  to {opacity: 0;}
}