JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>

CSS

body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}
.swiper-container{width:100%;height:300px;margin:20px auto;}
.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}

JavaScript

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination'
    });