JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <transition-group name="list" tag="div" class="toolbar-wrapper">
    <p
      v-for="(n, i) in links"
      :key="n.key"
      :class="{ selected: !i }"
      @click="setActive(i)"
    >
      <a>{{ n.text }}</a>
    </p>
  </transition-group>
</div>

CSS

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}

.toolbar-wrapper {
  display: flex;
}

.toolbar-wrapper p {
  transition: all 0.5s;
}

a {
  text-decoration: none;
  color: #95d9e5;
  transition: background-color 0.2s;
  padding: 13px 18px;
}

a:hover {
  color: #fff;
  background: #30b0c7;
}

p.selected a {
  color: red;
}



body {
  background: black;
}

Babel + JSX

new Vue({
  el: '#app',
  data() {
    return {
      links: [
        { name: '/dashboard', text: 'Панель управления' },
        { name: '/table', text: 'Таблица' },
        { name: '/ratesSetter', text: 'Тарифы' },
        { name: '/chart', text: 'График' },
        { name: '/logsBook', text: 'Журнал' },
      ].map((n, i) => ({ ...n, key: i + 1 })),
    };
  },
  methods: {
    setActive(index) {
      const [ link ] = this.links.splice(index, 1);
      setTimeout(() => this.links.unshift(link), 500);
    },
  },
});