JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.pkgd.min.js"></script>
<div class="gallery js-flickity" data-flickity-options='{ "autoPlay": 1500 }'>
    <div class="gallery-cell">
        <div class="review">
            <p lang="en" dir="ltr">The new Reuters TV app is incredible. This is how mobile news video should work. <a href="https://t.co/UzzOpvHhxG">https://t.co/UzzOpvHhxG</a>  <a href="http://t.co/OxFPP4PmHr">pic.twitter.com/OxFPP4PmHr</a>

            </p>&mdash; Mike Pilarz (@mikepilarz) <a href="https://twitter.com/mikepilarz/status/564541411513868288">February 8, 2015</a>

            </p>
        </div>
    </div>
    <div class="gallery-cell">
        <div class="review">
             <h3>Finally. Good mobile video news</h3>

            <hr>
            <p>“Great app on a number of different levels. UI is sleek and simple and content can be scheduled for download. Most importantly, though, they’ve actually done a great job of delivering pre-recorded segments in a news channel type fashion. Really well done!”</p>
        </div>
    </div>
    <div class="gallery-cell">
        <div class="review">
            <p lang="en" dir="ltr">My new <a href="https://twitter.com/ReutersTV">@ReutersTV</a> 15 min personalised news show via app is a little bit of magic for Monday morning <a href="http://t.co/E6N4JfE7qf">pic.twitter.com/E6N4JfE7qf</a>

            </p>
            <p>
                <br />&mdash; Stephen Waddington (@wadds) <a href="https://twitter.com/wadds/status/607814707936915456">June 8, 2015</a>

            </p>
        </div>
    </div>
    <div class="gallery-cell">
        <div class="review">
             <h3>Gorgeous App</h3>

            <hr>
            <p>"This app is amazing. By far the best way to watch the news on your iPhone."</p>
        </div>
    </div>
    <div class="gallery-cell">
        <div...

CSS

/* external css: flickity.css */
 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
.review {
    border: 1px solid #eee;
}
.gallery {
    background: #fff;
}
.gallery-cell {
    width: 100%;
    height: 200px;
    margin-right: 10px;
    background: #fff;
    counter-increment: gallery-cell;
}
/* hide disabled button */
 .flickity-prev-next-button:disabled {
    display: none;
}
@media screen and (min-width: 768px) {
    /* half-width cells for larger devices */
    .gallery-cell {
        width: 50%;
    }
    .flickity-prev-next-button {
        width: 30px;
        height: 230px;
        background: #333;
    }
}
@media screen and (max-width: 768px) {
    .flickity-prev-next-button.next {
        width: 50px;
    }
    .flickity-prev-next-button.previous {
        width: 50px;
    }
}
.flickity-page-dots {
    display: none;
}
.flickity-prev-next-button {
    width: 130px;
    height: 230px;
    border-radius: 0px;
    background: #fff;
    border-top:1px solid white;
    border-right:1px solid white;
    border-bottom:1px solid white;
    box-shadow: 15px -4px 48px -28px #000;
}
.flickity-prev-next-button.next {
    right: 0px;
    box-shadow: -15px -4px 48px -28px #000;
}
.flickity-prev-next-button:hover {
    background: #fff;
}
/* arrow color */
 .flickity-prev-next-button .arrow {
    fill: #000;
}
.flickity-prev-next-button.no-svg {
    color: #fff;
}
/* position outside */
 .flickity-prev-next-button.previous {
    left: 0px;
}
.flickity-prev-next-button.next {
    right: 0px;
}