JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

CSS

#tftbBadge {
  display: block;
  height: 50px;
  width: 200px;
  border-radius: 5px 0 0 5px;
  top: 100px;
  right: -142px;
  overflow: hidden;
  position: fixed;
  transition: right 0.2s linear;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

#tftbBadge:hover {
  right: 0;
  animation: tftbBounce 0.8s linear;
}

#tftbBadge img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

@keyframes tftbBounce {
  0% {
    right: -119px;
  }
  30% {
    right: 0;
  }
  50% {
    right: -20px;
  }
  70% {
    right: 0px;
  }
  80% {
    right: -10px;
  }
  90% {
    right: 0;
  }
  95% {
    right: -5px;
  }
  100% {
    right: 0;
  }
}

JavaScript

$(function() {
  var tftbTag = $('<a href="https://tftb.co" id="tftbBadge"/>');
  $(tftbTag).append('<img src="https://images.clickfunnels.com/b3/61c580307b11e88a6b0be4a2ef0eae/TFTB-Badge.png" alt="Built With The Funnel Toolbox" />')
  $('body').append(tftbTag);
});