JSFiddle - React, Tailwind, and code Playground

by nadeemmnn2007

HTML

<div style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.</div>

	<div style="padding:20px;">  
	<button id="movedown">Move Down</button> <button id="moveup">Move Up</button></div>
<div style="margin-right:50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec...

CSS

#mcart{position:fixed;padding:10px;width:270px;right:-260px;top:0;margin-top:-90px}
	#toggle {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* float: left; */
right: 0px;
background: #99A411;
font-size: 30px;
color: #FFF;
margin-top: 85%;
position: relative;
}
.mleft,.mright{ float:left;}
.mleft {
display: table-cell;
width: 80px;
margin-left: -70px;
position: relative;

top:300px;

}
.mright {
width: 270px;
background: #FFF;
height: 600px;
border: solid 2px #999;
top: 0px;
opacity: 0.91;
top: 100px;
position: absolute;
border-radius: 16px 0px 0px 16px;
padding: 10px;
}

JavaScript

var i=0;
$('#toggle').click(function() {
	if(i%2==0){
					$('#mcart').animate({
								duration:2000,
								'marginRight' : "+=270px" //moves right

						
					});
					i++;
				}
		else{
								$('#mcart').animate({
								duration:2000,
								'marginRight' : "-=270px" //moves right

						
					});
					i--;
			}
					
    });
	
    
    $('#movedown').click(function() {
        $('#mcart').animate({
        'marginTop' : "+=30px" //moves down
        });
    });
    
    $('#moveup').click(function() {
        $('#mcart').animate({
        'marginTop' : "-=30px" //moves up
        });
    });