JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-wrap">

		<div id="slot-machine-tabs">

			<ul class="tabs">
				<li><a href="#one">Tab One</a></li>
				<li><a href="#two">Tab Two</a></li>
				<li><a href="#three">Tab Three</a></li>
			</ul>

			<div class="box-wrapper">

				<div id="one" class="content-box">
					<div class="col-one col">
						<img src="images/evangeline.jpg" alt="" />
					</div>
					<div class="col-two col">
						<h3></h3>
						<p> دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است.</p>
					</div>
					<div class="col-three col">
						<p>وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت می‌کند.
فعالیت سایت به دو دسته تقسیم میشود : بخش اول معرفی و دانلود جدید ترین مثال و سورس های آماده جی کوئری همراه با دمو و آموزش و سورس.</p><p>۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p><p>۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p><p>۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
					</div>
				</div>

				<div id="two" class="content-box">
					<div class="col-one col">
						<img src="images/elizabeth.jpg" alt="" />
					</div>
					<div class="col-two col">
						<h3></h3>
						<p>بخش دیگر این سایت مستندات آموزشی است که برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته شده است و  این خود باعث سهولت برای طراحان وب شده است.</p>
					</div>
					<div class="col-three col">
						<p>۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین...

CSS

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: url(../images/bg.png); }
#page-wrap { width: 700px; margin: 50px auto; }
a { text-decoration: none; }
h3 { margin: 0 0 10px 0; }

.tabs { list-style: none; overflow: hidden; padding-left: 1px; }
.tabs li { display: inline; }
.tabs li a { display: block; float: left; padding: 4px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }

.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background: white; border: 1px solid #ccc; margin: -1px 0 0 0; height: 210px; position: relative; }
.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 658px; height: 230px; }

.current { z-index: 100; }

.col-one, .col-two, .col-three { width: 30%; float: left; position: relative; top: 350px; }
.col-one, .col-two { margin-right: 3%; }
img
{
	width:300px;
	height:300px;
	overflow:visible;
}

JavaScript

var columnReadyCounter = 0;

// This is the callback function for the "hiding" animations
// it gets called for each animation (since we don't know which is slowest)
// the third time it's called, then it resets the column positions
function ifReadyThenReset() {
	
	columnReadyCounter++;
	
	if (columnReadyCounter == 3) {
		$(".col").not(".current .col").css("top", 350);
		columnReadyCounter = 0;
	}

};

// When the DOM is ready
$(function() {
	
	var $allContentBoxes = $(".content-box"),
	    $allTabs = $(".tabs li a"),
	    $el, $colOne, $colTwo, $colThree,
	    hrefSelector = "",
	    speedOne = 1000,
		speedTwo = 2000,
		speedThree = 1500;
	
	// first tab and first content box are default current
	$(".tabs li:first-child a, .content-box:first").addClass("current");
	$(".box-wrapper .current .col").css("top", 0);
	
	$("#slot-machine-tabs").delegate(".tabs a", "click", function() {
		
		$el = $(this);
		
		if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
		
			// current tab correctly set
			$allTabs.removeClass("current");
			$el.addClass("current");
			
			// optional... random speeds each time.
			speedOne = Math.floor(Math.random()*1000) + 500;
			speedTwo = Math.floor(Math.random()*1000) + 500;
			speedThree = Math.floor(Math.random()*1000) + 500;
		
			// each column is animated upwards to hide
			// kind of annoyingly redudundant code
			$colOne = $(".box-wrapper .current .col-one");
			$colOne.animate({
				"top": -$colOne.height()
			}, speedOne);
		
			$colTwo = $(".box-wrapper .current .col-two");
			$colTwo.animate({
				"top": -$colTwo.height()
			}, speedTwo);
		
			$colThree = $(".box-wrapper .current .col-three");
			$colThree.animate({
				"top": -$colThree.height()
			}, speedThree);
			
			// new content box is marked as current
			$allContentBoxes.removeClass("current");		
			hrefSelector = $el.attr("href");
			$(hrefSelector).addClass("current");
		
			// columns from new content area are moved up from the bottom
			// also...