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 style="display:none">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 style="display:none">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

/* Description */
#headslide p {
box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);
margin:0;
}

/* Title */
#headslide h3 {
background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}



#headslide {
height: 355px;
overflow: hidden;
margin-left: 20px;
}
#headslide li.post-content {
position: relative;
margin: 0 auto;
}
#headslide li:first-child{display:block;}
#headslide li{display:none;}
#headslide input#pauseButton{position:relative;z-index:9!important}
.content-margin {position:relative;display: inline-block; z-index:1000;}
.slidshow-thumbnail {
position: relative;
display: block;
width: 300px;
height: 200px;
overflow: hidden;
float: left;
margin: 0 0 20px 0;
z-index: 2000;
}
.slidshow-thumbnail img {height: auto;min-width:inherit!important;width:100%;top:0;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear}
.slidshow-thumbnail img:hover {position:relative;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear;
}
#headslide h3 a {
display: block;
max-height: 80px;
overflow: hidden;
 color: black;
text-decoration: none;
}
#headslide p {
font-size: 15px;
font-weight: normal;
text-transform: capitalize;
background: #f5f5f5;
color: #555;
padding: 1% 2%;
}

.rmore{display: inline-flex;font-weight:normal;text-transform:uppercase;position:relative;}
.rmore a{display: inline-flex;width: 100%;color:#fff;background:$(theme.color);font-weight:bold;text-decoration:none!important;text-align:center;padding:8px...

JavaScript

$('#headslide ul').cycle({
	timeout: 4000,
	pager: '#headslide .pager',
     after: function(currSlideElement, nextSlideElement, options, forwardFlag){
    $(nextSlideElement).find("p" ).hide();               
    $(nextSlideElement).find("p" ).toggle("slide");       
    return false;
     }});