JSFiddle - React, Tailwind, and code Playground

by nadeemmnn2007

HTML

<div class="container clearfix">
            <div class="header">
                <h1>Slide Image</h1>
            </div>
            <!--left Block 1-->
            <div class="parent" style="background-color: green;">
                <img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="indian flag"  />
                <span class="none">India</span>
            </div>
			 <div  class="parent" style="background-color: brown;">
                <img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="America flag"  />
                <span  class="none">America</span>
            </div>
           	<div class="parent"  style="background-color: yellow;">
                <img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="England flag"  />
                <span  class="none">England</span>
            </div>
           
           	<div  class="parent"  style="background-color: orange;">
                <img class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="England flag"  />
                <span  class="none">Europe</span>
            </div>
          	<div class="parent"  style="background-color: aquamarine;">
                <img class="animate"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="Pakistan flag"  />
                <span  class="none">Pakistan</span>
            </div>
           <div  class="parent"  style="background-color: gold;">
                <img  class="animate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZfUb3hdn5JdY_RKyOJUXApu4zymfH_Kp-6JZTdznH3_oHLh4DbQ" alt="Japan flag"  />
                <span ...

CSS

span.none{display:none;position: absolute;top: 34%;left: 60%;}
div.parent{width:25%;position:relative;} 
img.animate{position:relative;}

JavaScript

$('.animate').mouseover(function() { 
				 	$(this).animate({ left: "100px" }); //sliding the flag image to 100px from left
					$(this).parent().filter(':not(:animated)').animate({ width: "50%" }); // $(this).parent() finds the parent i.e div
					$(this).next().show();  // $(this).next() finds the next subling i.e span
					})
					.mouseout(function() {
					$(this).animate({ left: "0px" });  //sliding back the flag image to 0px to left
						$(this).parent().animate({ 'width':'25%' });// $(this).parent() finds the parent i.e div
						$(this).next().hide(); // $(this).next() finds the next subling i.e span
					});