JSFiddle - React, Tailwind, and code Playground

by Brian Houlihan

HTML

<br><br>      <span id="closed">       <div class="textleft">Monday – Friday</div>       <div class="thehours">8 a.m.–11 p.m.<span class="more">&nbsp;Eastern Time</span></div>       <div class="textleft">Saturday – Sunday</div>       <div class="thehours">11 a.m.–5 p.m.<span class="more">&nbsp;Eastern Time</span></div>       <div class="more"> <br>       


<p class="js-nametag1">We are closed on federal holidays, the day after Thanksgiving and on December 24th.</p>        
<p class="js-nametag2">We are open on New Year’s Day, Martin Luther King Jr.'s Birthday, and Washington's Birthday from 11 a.m.–5 p.m. ET.</p>       



</div>      </span>

CSS

.js-nametag1, .js-nametag2{
  position: absolute;
}
.js-nametag1{
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag2{
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}