JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<script src="https://wzrd.in/bundle/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.5/tiny-slider.css">
<div id="app">
  <tiny-slider :mouse-drag="true" :loop="false" items="1" gutter="20">
      <div>#1</div>
      <div>#2</div>
      <div>#3</div>
      <div>#4</div>
      <div>#5</div>
      <div>#6</div>
  </tiny-slider>
</div>

CSS

#app {
  position: relative;
}
.tns-item {
  font-size: 3rem;
  font-family: Arial;
  text-align: center;
  padding: 2em;
  background:#fafafb;
}
.tns-item:nth-child(odd) {  
  background: #c8e1ff;
}

Babel + JSX

var VueTinySlider = require('vue-tiny-slider');

new Vue({
	el: '#app',
  components: {
    'tiny-slider': VueTinySlider
  }
})