JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<div class="testimonials">
                <blockquote><p>xxxxx xx xxxx  xxxxx xx xxxx xxxxx xx xx!  xxxxx xx xxxx xxxxx xx xx xxxx xxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxx xx xx xxxx xxxxx xx xxxxxxxxx xx xxxx! xo
                <cite>&ndash;Name - City, State</cite></p></blockquote>
 
                <blockquote><p>xxxxx xx xxxx  xxxxx xx xxxx xxxxx xx xx!  xxxxx xx xxxx xxxxx xx xx xxxx xxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxx xx xx xxxx xxxxx xx xxxxxxxxx xx xxxx! xo
                <cite>&ndash;Name - City, State</cite></p></blockquote>
 
                <blockquote><p>xxxxx xx xxxx!  xxxxx xx xxxx xxxxx xx xx xxxx xxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxxx xx xxxxxxx xx xx xxxx xxxxx xx xxxxxxxxx xx xxxx! xo
                <cite>&ndash;Name - City, State</cite></p></blockquote>
                </div>

CSS

/* testimonials: */
.testimonials, .testimonials_static {
background:#E7E9E6 url(images/bg_quote_wrap.png) 25px 25px no-repeat;
border:1px solid #D8D9D6;
padding-bottom:120px;
margin-bottom:15px;
margin-top: 15px;
}
.contentArea .testimonials blockquote, .content_full_width .testimonials_static blockquote{
padding:20px 0 0 80px;
width:800px !important;font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#808080;
font-style:italic;
display:block;
}
#pageMain .testimonials blockquote, #pageMain .testimonials_static blockquote{
padding:20px 0 0 60px;
}
.testimonials blockquote p, .testimonials_static p{
margin: 0 !important;padding: 5px 0 5px 0 !important;
line-height:22px;
font-size: 16px;
font-style: italic;
}
.testimonials blockquote cite, .testimonials_static blockquote cite {
font-style: normal;
display: block;
text-align: right;
text-transform: uppercase;
font-size: 10px;font-weight: bold;
letter-spacing: 1px;
color: #555;
padding-right:6px;
font-family:Arial, Helvetica, sans-serif;
}

JavaScript

$(document).ready(function() {
    $('.testimonials').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});