JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hvr-bob"></div>

CSS

/* Bob */
	@-webkit-keyframes hvr-bob {
		50% {
			-webkit-transform: translateY(4px);
			transform: translateY(4px);
		}
	}
	
	@keyframes hvr-bob {
		50% {
			-webkit-transform: translateY(4px);
			transform: translateY(4px);
		}
	}

	.hvr-bob {
		display: inline-block;
        height: 80px;
        width: 80px;
        margin: 2%;
		vertical-align: middle;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-osx-font-smoothing: grayscale;
        
        /* use transition on parent */
        -webkit-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
	}

    /* the circle using a pseudo-element */
    .hvr-bob:before {
        content: "";
        display: block;
        background-color: #DDDDDD;
        border-radius: 100%;
        width: 100%;
        height: 100%;
    }

    /* use transform on parent */
     .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
	
	.hvr-bob:hover:before, .hvr-bob:focus:before, .hvr-bob:active:before {
		-webkit-animation-name: hvr-bob;
		animation-name: hvr-bob;
		-webkit-animation-duration: 1.5s;
		animation-duration: 1.5s;
		-webkit-animation-delay: .3s;
		animation-delay: .3s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-direction: alternate;
		animation-direction: alternate;
	}