JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
            <div class="red_hover"></div>
            <div class="green"></div>
            <div class="green_hover"></div>
            <div class="blue"></div>
            <div class="blue_hover"></div>
            <div class="yellow"></div>
            <div class="yellow_hover"></div>
            <div class="pink"></div>
            <div class="pink_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() {       
                setTimeout(function() {
                    $('.red_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });

                    $('.red_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 1000);

                setTimeout(function() {
                    $('.green_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });
                    $('.green_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 4000);

                }
                loop();
            });