JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/mint-ui/lib/index.js"></script>
<div id="app">
  <mt-swipe :auto="0">
    <mt-swipe-item v-for="(swiper, $index) in swipers">
      <a :href="swiper.href">
        {{ $index }}
      </a>
    </mt-swipe-item>
  </mt-swipe>
</div>

SCSS

@import url("//unpkg.com/mint-ui/lib/style.css");
.mint-swipe {
  height: 200px;
  text-align: center;
}
a {
  font-size: 30px;
}

Babel + JSX

var Main = {
    data () {
      return {
        swipers: [{
          href: 'github.com/elemefe/mint-ui'
        }, {
          href: 'github.com/elemefe/mint-ui'
        }, {
          href: 'github.com/elemefe/mint-ui'
        }]
      };
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')