JSFiddle - React, Tailwind, and code Playground

by jayakrishnancn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="col-lg-12" style="text-align: center">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>
    <span>&nbsp;</span>
    <i class="fa fa-fw fa-heart faa-pulse animated" style="float:right;"></i>&nbsp;&nbsp;&nbsp;
    <i class="fa fa-fw fa-star faa-pulse animated" style="float:right;"></i>&nbsp;&nbsp;&nbsp;
    <i class="fa fa-fw fa-smile-o faa-pulse animated" style="float:right;"></i>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <h1 class="post-header" style="text-align: center">This is the header</h1>
  </div>
</div>

CSS

/* CSS used here will be applied after bootstrap.css */
@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite !important;
  animation: pulse 2s linear infinite !important;
  font-size:1.8em;  
}
    .fa-heart {
        color: red !important;
    }
    .fa-star {
        color: gold !important;
    }
    .fa-smile-o {
      color: deeppink !important;
    }