JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <el-col :span="24" class="header">
    <el-col :span="10" class="logo">
      <br>
    </el-col>
    <el-col :span="10">
      <div class="tools">
        <i class="fa fa-align-justify"></i>
      </div>
    </el-col>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">顶栏导航一</el-menu-item>
      <el-menu-item index="2">顶栏导航二</el-menu-item>
      <el-menu-item index="3">顶栏导航三</el-menu-item>
    </el-menu>
    <div class="line"></div>
  </el-col>

  <el-col :span="10">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">

      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">侧栏导航一</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">侧栏导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">侧栏导航三</span>
      </el-menu-item>
    </el-menu>
  </el-col>

</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      activeIndex: "2"
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    }
  }
})