JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://webmaster.lk/n/js/jquery.lettering.js"></script>
<script src="http://webmaster.lk/n/js/jquery.easing.1.3.js"></script>
<script src="http://webmaster.lk/n/js/jquery.hoverwords.js"></script>
<link rel="stylesheet" href="http://webmaster.lk/n/css/style.css">
<body style="background:#cdcdcd;">
    <div class="sl_examples">
        <!-- ******************************************************* need to show one of the links below every 3 seconds *********************************************************--> <a href="#" id="example2" class="tam" data-hover="image3">image4</a>
 <a href="#" id="example1" class="sin" data-hover="image1">image2</a>

    </div>
</body>

CSS

.display {
           display: block !important;
       }
       a.display {
           display: block !important;
       }
       .hide {
           display: none !important;
       }
       #example1, #example2 {
           display: block;
           height: 40px;
           width: 200px;
           position: absolute;
           top: 10px;
           left: 10px;
           display: block;
           float: left;
       }
       #example1 {
           background: green;
           display: none;
       }
       #example2 {
           background: red;
       }

JavaScript

alert("azraar");
setInterval(function () {
    $("#example1").toggle();
    $("#example2").toggle();
}, 3000);
$('#example1').hoverwords();
$('#example2').hoverwords();