JSFiddle - React, Tailwind, and code Playground

by JJ Loneman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.13/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>
<div id="app">
  <v-app dark>
    <v-tabs fixed-tabs>
      <v-tab key="foo" href="/foo">Foo</v-tab>
      <v-tab key="bar" href="/bar">Bar</v-tab>
      
      <v-tab-item key="foo"></v-tab-item>
      <v-tab-item key="bar"></v-tab-item>
      
      <router-view></router-view>
    </v-tabs>
  </v-app>
</div>

JavaScript

const Foo = {
  template: '<p>Foo!</p>'
};
const Bar = {
  template: '<p>Bar!</p>'
};

const routes = [
  {
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  },
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
})