JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="likebox"></div>

CSS

#likebox{width: 300px; height: 328px; float: right; right: -300px; top: 150px; position: fixed; z-index: 1000;}
#likebox span{position: absolute; left: -70px; top: 0px;}
#likebox .likeboxBg{width: 288px; height: 328px; background-color: #fff; border: 5px solid #272f56; border-radius: 5px 5px 5px 5px; overflow: hidden; display: block; position: fixed;}

JavaScript

console.log($().jquery);
$('#likebox').html('<span><img src="http://f.galactica.pl/galactica/facebook-side.png" alt="" /></span><div class="likeboxBg"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FDelecta-Bydgoszcz%2F154952331215430&amp;locale=pl_PL&amp;width=293&amp;height=333&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:293px; height:333px;" allowTransparency="true"></iframe></div>');
$("#likebox").hover(function() {
		$(this).css('z-index', 1002);
		$(this).stop(true,false).animate({right:  0}, 300);},
	function() {
		var likebox = $(this);
		$(this).stop(true,false).animate({right: -300}, 300, function(){likebox.css('z-index', 1000);});
	});