JSFiddle - React, Tailwind, and code Playground

HTML

<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>
<div><span class="indicator">&nbsp;</span>Some text</div>

CSS

@keyframes redPulse {
  from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
  50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
  to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
  from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
  50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
  to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
div {
    margin: 5px 0 0 5px;
}
.indicator {
    width: 10px;
    height: 30px;
    
    display: inline-block;

    background-color: red;

    -webkit-animation-name: redPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    animation-name: redPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}