JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

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;
       }
       #example2 {
           background: red;
       }

JavaScript

var hover = false;

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

$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();