JSFiddle - React, Tailwind, and code Playground

by moalla

HTML

<body>
<div id="main">
	<div id="right" class="box">
   
    </div>
    <div id="center" class="box">
    </div>
    <div id="left" class="box">
    </div>
</div>
</body>

CSS

body{
	background-image:url(../images/bg.png);
background-repeat:repeat;
}
#main{

	width:960px;
	height:700px;
	margin:auto;
}
#right{
	background-color:#06C;
	background-image:url(../images/right-box.jpg);
	background-position:center;
	transition:background 2s;
	margin-top:10px;
	float:right;
	margin-right:5px;
}
#center{
	background-color:#F90;
	margin-top:10px;
	float:right;
	margin-right:10px;
}
#left{
	background-color:#06C;
	margin-top:10px;
	float:left;
	margin-left:5px;
}
.box{
	width:310px;
	height:340px;
	margin-top:10px;
	border-radius:5px;
	background-repeat:no-repeat;
}

JavaScript

$(document).ready(function(e) {
	$('#right').mouseover(function(){
		
		$('#center').stop().animate({"width":220});
		$(this).stop().animate({"width":400});


	});
	$('#right').mouseout(function(){
		$('#center').stop().animate({"width":310});
		$('#right').stop().animate({"width":310});
	});
    $('#right').hover(function(){
    $(this).css('background','yellow');
    },function(){
    $(this).css('background','#06C');
    })
});