JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.4/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<div id="demo">

  <button @click="shuffle" type="button">Shuffle</button>
  
  <hr>

  <table class="table">
    <tbody name="table-row" is="transition-group">
      <tr v-for="item in items" :key="item.id" class="table-row-item">
       <td>{{ item.id }}</td>
       <td>{{ item.name }}</td>
      </tr>
    </transition-group>
  </table>
  
</div>

SCSS

body {
  padding: 15px;
}

hr {
  margin: 15px 0;
}

.table-row-move {
  transition: all .5s;
}

.table-row-item {
  backface-visibility: hidden;
}

JavaScript

console.clear()

const vm = new Vue({
	el: '#demo',
  data: {
  	items: [
    	{ id: 1, name: 'Vue' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' },
      { id: 4, name: 'Ember' },
    ]
  },
  methods: {
  	shuffle() {
    	this.items = _.shuffle(this.items)
    }
  }
})