JSFiddle - React, Tailwind, and code Playground
by mattography
HTML
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<button class="date-nav-prev" id="prev">Prev</button>
<button class="date-nav-next" id="next">Next ></button>
<br />
<div id="wrapper">
<div class="user-actions daysAgo2"><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p lang="en" dir="ltr">Exclusive: Democratic donors urge Biden to challenge Clinton in U.S. 2016 race <a href="http://t.co/pVZxeOTV5K">http://t.co/pVZxeOTV5K</a> via <a href="https://twitter.com/Reuters">@Reuters</a> <a href="https://twitter.com/ReutersTV">@ReutersTV</a></p>— Justin Mitchell (@JstnMtchll) <a href="https://twitter.com/JstnMtchll/status/645008630278942720">September 18, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div class="user-actions yesterday"><h3>A nice way to watch the news</h3>
<p>by CalifDude</p>
<p>Nice sharp videos and quality programming, with an international perspective. It feels like a leap forward in how we can watch the news on our mobile devices. I opted for the ad-free upgrade since it's such a bargain.</p></div>
<div class="user-actions today"><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p lang="en" dir="ltr">Exclusive: Democratic donors urge Biden to challenge Clinton in U.S. 2016 race <a href="http://t.co/pVZxeOTV5K">http://t.co/pVZxeOTV5K</a> via <a href="https://twitter.com/Reuters">@Reuters</a> <a href="https://twitter.com/ReutersTV">@ReutersTV</a></p>— Justin Mitchell (@JstnMtchll) <a href="https://twitter.com/JstnMtchll/status/645008630278942720">September 18, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
</div>
CSS
#wrapper {
width:450px;
height:220px;
position:relative;
float:left;
/*overflow:hidden;*/
}
.user-actions {
width:100%;
height:100%;
position:relative;
float:left;
overflow:hidden;
margin:0;
}
JavaScript
$('#wrapper').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
timeout: 0
});