JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/javisperez/vue-longpress/master/dist/vue-longpress.min.js"></script>
<h1>VueLongpress Example</h1>
<div id="app"></div>

CSS

body {
   padding: 10px;
}
.card {
  box-shadow: 1px 1px 10px #b1b1b1;
  margin: 10px;
  padding: 20px;
  display: inline-block;
  width: 250px;
  font-size: 18px;
  text-align: center;
  transition: all 1s;
  border-radius: 4px;
  transform-origin: 0 50%;
}
.user-enter, .user-leave-to {
  opacity: 0;
  transform: scaleX(0);
}
.user-leave-active {
  position: absolute;
}

JavaScript

new Vue({
    name: 'vue-longpress-example',

    el: '#app',

    components: {
        longpress: VueLongpress
    },

    data: {
        names: ['Stanislav Amalric', 'Melanthios Linas', 'Lubomír Francis', 'Eric Irma', 'Aminah Gaëlle', 'Carrie Hersh', 'Darko Clemens'],
    },

    methods: {
        doDelete(index) {
            this.names.splice(index, 1);

            console.log('That is, it\'s gone!');
        }
    },

    template: `
            <transition-group name="user" class="users" tag="div">
                <div class="card" v-for="(name, index) in names" :key="name">
                    <p>{{ name }}</p>
                    <longpress
                        class="btn btn-primary"
                        :value="index"
                        duration="5"
                        :on-confirm="doDelete"
                        pressing-text="Deleting in {$rcounter}"
                        action-text="Deleting now, please wait....">
                        Delete this user</longpress>
                </div>
            </transition-group>`
});