JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="0"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div"
	>
    <div>
        <img src="http://placehold.it/500x150/ff0000/ffffff/&text=Slide+1" />
		<h3>Facebook Marketing</h3>
		<p>Let me help you with the marketing on the social medias</p>
		<a href="#" class="cta">Sounds Interesting?<br />Click Here</a>
	</div>
	<div>
	    <img src="http://placehold.it/500x150/00ff00/ffffff/&text=Slide+2" />
		<h3>Title 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae suscipit ante.</p>
		<a href="#" class="cta">Sounds Interesting?<br />Click Here</a>
	</div>
	<div>
		<img src="http://placehold.it/500x150/0000ff/ffffff/&text=Slide+3" />
		<h3>Title 3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae suscipit ante.</p>
		<a href="#" class="cta">Sounds Interesting?<br />Click Here</a>
	</div>
</div>

<div id="slider-nav">
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a>
</div>

CSS

.cta{
    background: #eee;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
}
.cta:hover{
    background: #ddd;
}
#slider-nav{
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px dashed #ddd;
}