JSFiddle - React, Tailwind, and code Playground

by ipyxel

HTML

<div class="box">
 <p align="center">Find More Landing Page Tips At</p>
   
<div class="textarea">
    <p align="center"><a href="www.ipyxel.com" class="shaking_text"> 
iPyxel Creations</a></p>
</div>
 </div>

CSS

.box{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	border: medium solid #333333;
	background-color: #CCCCCC;
	height: 100px;
	width: 300px;
}

.textarea{
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: #0066FF;
	font-size: 14px;
	line-height: 17px;
}

.shaking_text{
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    $('.shaking_text').mouseover(function() {
            $('.shaking_text').effect('shake',{ 
            /*adjusts how many times the element will shake*/ times:2,
            /*adjusts how far (in pixels) the element will shake*/ distance:3,
            /*adjusts which direction the element will shake*/ direction: "up"}, 
            /*adjusts how fast the element will shake*/ 500);
        });
    $('.shaking_text').mouseout(function() {
            $('.shaking_text').effect('shake',{times:2}, 500);
        });
});