JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <b-container class="col-3" style="border: 2px solid;">
    <b-tabs  pills vertical :active-nav-item-class="'tab-active-class'">
      <b-tab :title-link-class="'tab-title-class'">
        <template #title>
          <b-icon icon="gear"></b-icon> Settings
        </template>
      </b-tab>
      <b-tab title="Users"></b-tab>
      <b-tab title="customers"></b-tab>
    </b-tabs>
  </b-container>
</div>

CSS

body { padding: 1rem; }

.tab-title-class {
  color: purple;
}

.tab-active-class {
  background-color: red;
}

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        show: true
      }
    },
    watch: {
      show(newVal) {
        console.log('Alert is now ' + (newVal ? 'visible' : 'hidden'))
      }
    },
    methods: {
      toggle() {
        console.log('Toggle button clicked')
        this.show = !this.show
      },
      dismissed() {
        console.log('Alert dismissed')
      }
    }
  })
}