JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="btWhois"></div>
<div class="wTop">

</div>
<div class="wBottom">

</div>
<div class="bTop">

</div>
<div class="bBottom">

</div>
<div class="onine">

</div>

CSS

.btWhois, .online, .bTop, .bBottom, .wTop, .wBottom {
  position:fixed;
   display:block;
}

.btWhois {
  width:80px;
  height:80px;
  bottom:0;
  left;0;
  background:orange;
  cursor:pointer;
}

.btop, .bBottom, .wTop, .wBottom {
  right:-24px;
}

.btop, .bBottom {
  width:24px;
  height:22px;
  background:green;
}

.bTop {
  top:5px;
}

.bBottom {
  top:105px;
}

.wTop, .wBottom {
  background:red;
  width:15px;
  height:15px;
  transition:ease all .4s;
}

.wTop {
  top:0;
}

.wBottom {
  top:100px;
}

.online {
  right:0px;
  width:331px;
  height:90px;
  background:brown;
}

JavaScript 1.7

$('document).ready(function(){
  $('.btWhois').on('click', function(){
    if($('.online').css('right')=='-331px'){
      $('.wTop').css({'right': '6px'}, 400);
      $('.wBottom').css({'right': '6px'}, 400);
      $('.online').css({'right': '-276px'}, 400);
      $('.bTop').css({'right': '0px'}, 400);
      $('.bBottom').css({'right': '0px'}, 400);
      setTimeout(function(){
      	$('.online').css({'right': '-5px'}, 400);
      	$('.wTop').css({'transform':'rotate(-360deg)'});
      	$('.wBottom').css({'transform':'rotate(360deg)'});
      },2000);
    }
	});
});