JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<span class="a">Live</span>

CSS

.a {
  border: 2px solid #ff0000;
  font-size: 10vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.2em 0.5em;
}

.a::before {
  height: 0.5em;
  width: 0.5em;
  background: #ff0000;
  border-radius: 50%;
  animation-duration: 0.5s;
  animation-name: slidein;
  content:'';
  animation-iteration-count: infinite;
  margin-right: 0.25em;
}


@keyframes slidein {
  from {
     opacity: 0;
  }
  
  50% {
    opacity: 1;
  }

  to {
     opacity: 0;
  }
}