JSFiddle - React, Tailwind, and code Playground

by webdevem

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=4.8.1"></script>
<input type="button" class="tagButton tagButton1" value="Culture in Action">
<input type="button" class="tagButton tagButton1 activeTagButton" value="Org Change">
<input type="button" class="tagButton tagButton1" value="HR Transformation">

CSS

.tagButton {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 2px;
  color: #666;
  line-height: 22px;
  cursor: pointer;
}

.tagButton.activeTagButton {
  background-color: #7594af;
  border-color: #7594af;
  color: #fff;
}

.tagButton1.hover {
  background-color: #7594af;
  border-color: #7594af;
  color: #fff;
}

JavaScript

$(document).ready(function() {

  $('.tagButton').click(function() {
    $(this).toggleClass('activeTagButton');
  });

  $('.tagButton').hover(function() {
    var $button = $(this);
    $button.addClass('hover');
    myVar = setTimeout(function() {
        $button.removeClass('hover');
      },
      500);
  }, function() {
    //   alert('mouseout');
    clearTimeout(myVar);
    $(this).removeClass('hover');
  });


});