JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/cristijora/vue-notifyjs/master/dist/vue-notifyjs.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-notifyjs/master/themes/default.css">
<div id="app">
  <div>
    <notifications></notifications>
    <button @click="addNotification('top','right')">Add Top right</button>
    <button @click="addNotification('buttom','right')">Add Bottom right</button>
    <button @click="addNotification('buttom','left')">Add Bottom left</button>
  </div>
</div>

CSS

.vue-notifyjs .list-move {
    transition: transform 0.3s, opacity 0.4s;
 }
.vue-notifyjs .list-item {
  display: inline-block;
  margin-right: 10px;

}
.vue-notifyjs .list-enter-active, .vue-notifyjs .list-leave-active {
  transition: opacity 0.4s;
}
.vue-notifyjs .list-enter, .list-leave-to  /* .list-leave-active for <2.1.8 */ {
  opacity: 0;
}

JavaScript

Vue.use(vueNotifyjs)
new Vue({
  el: '#app',

  methods: {
    addNotification(verticalAlign = 'top', horizontalAlign = 'right') {
      this.$notify({
        message: 'Welcome ',
        horizontalAlign: horizontalAlign,
        verticalAlign: verticalAlign,
        type: "success"
      })
    }
  }
})