JSFiddle - React, Tailwind, and code Playground

by Bernat Comerma

HTML

<div id="element"></div>

CSS

#element {width: 150px; height:150px; background-color: white; border:1px solid black }

JavaScript

$.fn.transition = function (properties, options) {
  var defaults = { duration: 1000, easing: '' };
  options = $.extend({}, defaults, options);
  properties['webkitTransition'] = properties['transition'] = 'all ' + options.duration + 'ms ' + options.easing;
  $(this).css(properties);
};

$('#element').hover(function () { 
    $(this).transition({'background-color': 'rgb(253,247,99)'}) },
                    function () { 
    $(this).transition({'background-color': 'rgb(255,255,255)'}, { easing: 'ease-out'}) });