JSFiddle - React, Tailwind, and code Playground

by simati

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">
    <transition-group name="table-row" tag="tbody">
      <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>

<div id="demo2">

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


    <transition-group name="table-row" tag="ul">
      <li v-for="item in items" :key="item.id" class="table-row-item">
       <span>{{ item.id }}</span>
       <span>{{ item.name }}</span>
      </li>
    </transition-group>
  
</div>

SCSS

body {
  padding: 15px;
}

hr {
  margin: 15px 0;
}


.table-row-move {
  transition: transform 1s;
}
.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)
    }
  }
})


const vm2 = new Vue({
	el: '#demo2',
  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)
    }
  }
})