JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <ul class="fake-dropdown">
    <li v-for="foo in pages" :class="{active: foo == activePage}">
      <a @click.prevent="activePage = foo" v-text="foo"></a>
      </li>
  </ul>
</main>

SCSS

.fake-dropdown {
  position: relative;
  
  display: flex;
  flex-flow: column nowrap;
  list-style: none;
  padding: 0;
  
  li a {
    display: block;
    padding: .5rem;
    background: silver;
  }
  
  li.active a {
    background: lime;
  }
  
  &:not(:hover) li:not(.active) {
    display: none;
  }
}

JavaScript

new Vue({
	el: 'main',
  
	data: {
  	pages: ['foo', 'bar', 'bin'],
  	activePage: 'foo',
  }
});