JSFiddle - React, Tailwind, and code Playground

by YoshiMaster

HTML

<div class="red"></div>
            <div class="red_hover"></div>
            <div class="green"></div>
            <div class="green_hover"></div>

CSS

.red{width:100px; height:100px; background:#F00; float:left;  
                 overflow:hidden; position:absolute; margin:0 0 0 10px;}
                .red_hover{width:100px; height:100px; background:#900; float:left;  
                 overflow:hidden; position:absolute; margin:0 0 0 10px; display:none;}

                .green{width:100px; height:100px; background:#0C3; float:left;  
                 overflow:hidden; margin:0 0 0 120px; position:absolute;}
                .green_hover{width:100px; height:100px; background:#060; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 120px; display:none;}

                .blue{width:100px; height:100px; background:#09F; float:left; 
                 overflow:hidden; margin:0 0 0 230px; position:absolute;}
                .blue_hover{width:100px; height:100px; background:#00F; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 230px; display:none;}

                .yellow{width:100px; height:100px; background:#FF0; float:left; 
                 overflow:hidden; margin:0 0 0 340px;}
                .yellow_hover{width:100px; height:100px; background:#F90; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 340px; display:none;}

                .pink{width:100px; height:100px; background:#FCF; float:left; 
                 overflow:hidden; margin:0 0 0 450px; position:absolute;}
                .pink_hover{width:100px; height:100px; background:#F0F; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 450px; display:none;}

JavaScript

$(document).ready(function() {
                function loop() {   
                    
                    $(".red").fadeOut(function(){green()});
                     $(".green").fadeIn();
                }
      function green(){
           $(".red").fadeIn();
           $(".green").fadeOut();
      }
                    
                    
                  

        
       setInterval(function() {loop()},1000);
          //   $(".red").fadeOut();  
  });