JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src='https://unpkg.com/[email protected]'></script>
<div id="demo">
    <ul class="nav navbar-nav navbar-right"  @mousedown="mouseDown" @mouseup="mouseUp">
  <li id="home" class="mnu"><nuxt-link to="/home">HOME</nuxt-link></li>
  <li id="reward" class="dropdown mnu">
    <nuxt-link to="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">REWARDS <span class="caret"></span></nuxt-link>
    <ul class="dropdown-menu">
      <li><nuxt-link to="/reward">REWARD DISTRIBUTION ENGINE</nuxt-link></li>
      <li><nuxt-link to="/daily-challenges">DAILY CHALLENGES</nuxt-link></li>
      <li><nuxt-link to="/revive-reward">REVIVE REWARD</nuxt-link></li>
    </ul>
  </li>
  <li id="logs" class="dropdown mnu">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LOGS <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><nuxt-link to="/logs1">GAMEPLAY</nuxt-link></li>
      <li><nuxt-link to="/logs2">REWARDS</nuxt-link></li>
      <li><nuxt-link to="/logs3">PURCHASES</nuxt-link></li>
    </ul>
  </li>
  <li class="mnu"><nuxt-link class="btn btn-default btn-sign-out">SIGN OUT</nuxt-link></li>
</ul>
</div>

CSS

.highlight {
    background-color: yellow;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {el: null},
    methods: {
      mouseDown(event) {
      this.el = event.target.closest('ul').closest('li').firstChild
      
      if(this.el)
      this.el.classList.add("highlight");
    },
    mouseUp(event) {
    if(this.el)
    	this.el.classList.remove("highlight");
    }
    }
})