JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
    <img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>Cicero famously orated against his p...</p>
<h3><a href="#">Download Premium Blogger Templates</a></h3>
<span class="info">Info</span>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
    <img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>SEO friendly Flat style Custom Fonts.</p>
<h3><a href="#">Modern with a pixel-perfect eye</a></h3>
<span class="info">Info</span>
</span>
</li>
</ul>
<div class="pager"></div>
</div>

CSS

/******************
* Bounce in Left *
*******************/
@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-1000px);
	}

	80% {
		transform: translateX(-10px);
	}

	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-1000px);
	}

	80% {
		-webkit-transform: translateX(-10px);
	}

	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-1000px);
	}

	80% {
		-moz-transform: translateX(-10px);
	}

	100% {
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-1000px);
	}

	80% {
		-o-transform: translateX(-10px);
	}

	100% {
		-o-transform: translateX(0);
	}
}

.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}

/****************
* bounceInRight *
****************/
@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(1000px);
	}

	80% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(1000px);
	}

	80% {
		-webkit-transform: translateX(10px);
	}

	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(1000px);
	}

	80% {
		-moz-transform: translateX(10px);
	}

	100% {
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(1000px);
	}

	80% {
		-o-transform: translateX(10px);
	}

	100% {
		-o-transform: translateX(0);
	}
}

.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}

/* Description */
#headslide p...

JavaScript

$('#headslide ul').cycle({
	timeout: 4000,
	pager: '#headslide .pager' });