JSFiddle - React, Tailwind, and code Playground

by ipyxel

HTML

<div class="box">
 <p align="center">*Offer Available From</p>
   
<div class="textarea">
    <p align="center"><a href="www.ipyxel.com" class="pulsing_text"> 
April 2 - April 4</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;
}

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

JavaScript

function pulsate() {
    var pulser = $(".pulsing_text");
    if(!pulser.hasClass('stop pulsing')){
        pulser.animate({opacity: 
		/*this adjustst how faded the element will get*/ 0.2}, 
		/*this adjusts how quickly the element will fadeout*/1000, 'linear')
        .animate({opacity: 1}, 
        /*this adjusts how quickly the element will fade back in*/1000, 'linear', pulsate);
    }else{
        pulser.animate({opacity: 1},10)
            .removeClass('stop pulsing');
    }
}

$(document).ready(function() {
    pulsate();
    /*this will stop the text from pulsing when the user drags their cursor over the pulsing text*/
    $('a').mouseenter(function(){
        $('.pulsing_text').addClass('stop pulsing');
    });
});