JSFiddle - React, Tailwind, and code Playground

by Nirvanachain

HTML

<button id="right">Hover Over Me</button>
<br />
Update
<div class="block1">block 1</div>
<div class="circleLeft"></div>

<div class="block2">block 2</div>
<div class="circleRight"></div>
<br class="clear" />

CSS

.block1 {
 
  background-color:#abc;
  margin-left:20px;
  width:100px;
  height:100px;
  float:left;
}

.block2 {
  float:right;
  margin-right:20px;
  background-color:#abc;
  width:150px;
  height:100px;
}
.redDiv {
    
    width: 20px;
    height:90px;
    background-color:red;
    float:left;
}
.circleLeft {
    height:100px;
    width:100px;
    -moz-border-radius:50%;
    border-radius:50%;
    background-color:red; 
    float:left;        
}

.circleRight {
    height:100px;
    width:100px;
    -moz-border-radius:50%;
    border-radius:50%;
    background-color:red; 
    float:Right;        
}
.clear{
    clear:both;
}

JavaScript

$("#right").hover(function(){
  $(".block1").animate({
      width: "+=50px",
      opacity: 0.5,
      borderTopRightRadius: 50,
      borderBottomRightRadius: 50,
      borderTopLeftRadius: 50,
      borderBottomLeftRadius: 50
  }, "900");
},function(){
    $(".block1").animate({
        width: "-=50px",
        opacity: 100,
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0
    }, "900");
});


$("#right").hover(function(){
  $(".block2").animate({
      width: "-=50px",
      opacity: 100,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0
  }, "slow");
},function(){
    $(".block2").animate({
        width: "+=50px",
        opacity:0.5,
        borderTopLeftRadius: 50,
        borderBottomLeftRadius: 50,
        borderTopRightRadius: 50,
        borderBottomRightRadius: 50
    }, "slow");
});