JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app"> 
  <ul class="nav nav-tabs">
    <li class="nav-item"
      @click.prevent="currentView = 'home-component'"
      :class="{'active': currentView === 'home-component' }">
      <a href class="nav-link">Home</a>
    </li>
    <li class="nav-item"
        @click.prevent="currentView = 'list-component'"
        :class="{'active': currentView === 'list-component' }">
      <a href class="nav-link">List</a>
    </li>
    <li class="nav-item"
        @click.prevent="currentView = 'about-component'"
        :class="{'active': currentView === 'about-component' }">
      <a href class="nav-link">About</a>
    </li>
  </ul>

  <div class="app-body">
    <home-component 
      text="This is Home-Component"
      v-if="currentView === 'home-component'"></home-component>
      
    <list-component 
      text="This is List-Component"
      v-if="currentView === 'list-component'"></list-component>
      
    <about-component
      text="This is About-Component"
      v-if="currentView === 'about-component'"></about-component>
  </div>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  padding-top: 2rem;
  font-size: 1rem;
}

.nav-tabs {
  display: block;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 0;
  border-bottom: 1px solid #ddd;

  .nav-link{
    display: block;
    &:hover {
      text-decoration: none;
      border-bottom: none;
    }
  }
}

li {
  float: left;
  display: block;
  margin-right: 1rem;
  margin-bottom: -1px;
  padding: 4px 0.8rem;
  border: 1px solid #ddd;
  list-style: none;

  &:hover, &.active {
    background-color: #ddd;
  }
}

a {
  text-decoration: none;  
}

input {
  width: 90%;
  padding: 3px;
  font-size: 1rem;
}

JavaScript

const child = {
	template: `<input v-model="msg">`,
  props: {
  	text: String
  },
  data() {
    return {
	    msg: this.text
    }
	}
};


const app = Vue.createApp({
	components: {
  	"home-component": {...child},
  	"list-component": {...child},
  	"about-component": {...child},
  },
  data () {
    return {
      // 預設值為 'home-component'
      currentView: 'home-component'
    };
  }
});

app.mount('#app');