JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="wrap">
  <div class="f">
    FIRST
  </div>
  <div class="box animated pulse">
    <div class="text">Pulse</div>
  </div>
  <div class="f">
    LAST
  </div>
</div>

CSS

.wrap {
  height: 50px;
  background: pink;
  width: auto;
}

.f {
  float: left;
  width: 150px;
  height: 30px;
  margin: 10px;
  float: left;
  line-height: 30px;
  overflow: hidden;
}

.box {
  float: left;
  width: 150px;
  height: 30px;
  margin: 10px;
  float: left;
  line-height: 30px;
  background: #be5900;
  overflow: hidden;
}

.text {
  text-align: center;
  color: #fff;
  font-size: 1em;
  font-family: sans-serif;
}

/*-- pulse animation --*/

.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.075);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
}

/*-- pulse animation --*/