JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="slide">
  <h3>Foobar</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quo dolorem, error vel tempore voluptas.</p>
</div>

CSS

@keyframes progressbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.slide {
  background: peru;
  padding: 1em;
  position: relative;
}

.slide:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: red;
  animation: progressbar 5s infinite linear;
}

.slide:hover:after {
  animation-play-state: paused;
}