JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="action active">
  <i class="action-icon fa fa-headphones"></i>
  <span class="action-label">Lyssna</span>
</div>

CSS

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.075, 1.075, 1.075);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.active .action-icon {
  animation-name: pulse;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  color: #149DB0;
}

.active .action-label {
  font-family: sans-serif;
  color: #149DB0;
  font-size: 0.9em;
  padding-left: 0.2em;
}