JSFiddle - React, Tailwind, and code Playground

by mvasko

HTML

<body>
<div id="joel">
</div>
    <div id="dante">
</div>
    <div id="mike">
</div>
    <div id="nick">
</div>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>

CSS

#body{
    width:1000px;
    height:1000px;
}
#joel{
    height:50px;
      width:50px;
    opacity:0.5;
background-image:url("http://qt-project.org/doc/qt-4.8/images/rect-color.png");
    float:left;
}
#dante{
    height:50px;
      width:50px;
    opacity:0.5;
background-image:url("http://qt-project.org/doc/qt-4.8/images/rect-color.png");
    float:left;
}
#mike{
    height:50px;
      width:50px;
    opacity:0.5;
background-image:url("http://qt-project.org/doc/qt-4.8/images/rect-color.png");
    float:left;
}
#nick{
    height:50px;
      width:50px;
    opacity:0.5;
background-image:url("http://qt-project.org/doc/qt-4.8/images/rect-color.png");
    float:left;
}

JavaScript

$(document).ready(function(){
  $("#joel").mouseenter(function(){
    $("#joel").animate({
      opacity:'1',
      height:'250px',
      width:'100px'
    });
  });
});
$(document).ready(function(){
  $("#joel").mouseleave(function(){
    $("#joel").animate({
      left:'10px',
      opacity:'0.5',
      height:'50px',
      width:'50px',
    });
  });
});
$(document).ready(function(){
  $("#dante").mouseenter(function(){
    $("#dante").animate({
      opacity:'1',
      height:'250px',
      width:'100px'
    });
  });
});
$(document).ready(function(){
  $("#dante").mouseleave(function(){
    $("#dante").animate({
      left:'10px',
      opacity:'0.5',
      height:'50px',
      width:'50px',
    });
  });
});

$(document).ready(function(){
  $("#mike").mouseenter(function(){
    $("#mike").animate({
      opacity:'1',
      height:'250px',
      width:'100px'
    });
  });
});
$(document).ready(function(){
  $("#mike").mouseleave(function(){
    $("#mike").animate({
      left:'10px',
      opacity:'0.5',
      height:'50px',
      width:'50px',
    });
  });
});
$(document).ready(function(){
  $("#nick").mouseenter(function(){
    $("#nick").animate({
      opacity:'1',
      height:'250px',
      width:'100px'
    });
  });
});
$(document).ready(function(){
  $("#nick").mouseleave(function(){
    $("#nick").animate({
      left:'10px',
      opacity:'0.5',
      height:'50px',
      width:'50px',
    });
  });
});