JSFiddle - React, Tailwind, and code Playground

by mpsingh2003

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <navigation-tabs></navigation-tabs>
</div>

JavaScript

Vue.component('navigation-tabs', {
    props: {
        tabs: Array,
        title: String,
        type: String
    },
    data() {
        return {
            navigationTabs: Vue.util.extend([], this.tabs),
            selectedTab: {},
            tabCounter: 0,
            tabType: this.type ? this.type : 'tabs'
        }
    },
    methods: {
        navItemClasses(selectedTab) {
            if (selectedTab.selected) {
                if (this.type) {
                    return 'bg-gradient-dark text-white';
                }
            } else if (selectedTab.disabled === true) {
                return 'text-danger';
            }
        },
        selectTab(selectedTab) {
            if (selectedTab.disabled !== true) {
                this.navigationTabs.forEach(tab => {
                    tab.selected = false;
                });
                selectedTab.selected = true;
            }
        }
    },
    computed: {
        activeComponent() {
            return this.navigationTabs.filter(x => x.selected === true)[0]
        }
    },
    template: `
        <div>
            <div>
                <ul class="text-md nav" :class="tabType === 'tabs' ? 'nav-tabs' : 'nav-pills'">
                    <li v-for="(tab, index) in navigationTabs" class="nav-item card-img-holder" v-if="tab.hideForSite !== $parent.site">
                         <img src="/shared/resources/images/circle.svg" class="card-img-absolute">
                         <a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
                         {{ tabCounter++ + ': ' + tab.name }}
                         </a>
                    </li>
                </ul>
            </div>
        </div>
    `,
});

let app = new Vue({
    el: '#app',
    data: {
        site: '1',
        myTabs: [
            {
                name: 'Example 1',
                selected: true,
                component: 'example-one'
            },
            {
              ...