JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<div id="days-holder">
               <div class="day"></div>
               <div class="day"></div>
               <div class="day "></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
           </div>

CSS

#days-holder {width:10000px;}     
.day {width:200px;height:200px;background:black;float:left;margin:0 10px;}

JavaScript

$('.day').hover(function() {
        
      if($(this).index()==0){
          $(this).animate({'width':400,'height':400}, 500);
      }else{            
          $(this).animate({'width':400,'height':400}, 500);
          $(this).parent().stop().animate({'margin-left':'-100'} , 500);  
      }          
    }, function() {
       $(this).animate({'width':200,'height':200}, 500);
       $(this).parent().stop().animate({'margin-left':'0'}, 500);
        
    });