JSFiddle - React, Tailwind, and code Playground

by bru89raf

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <b-form-tags 
               input-id="tags-basic" 
               v-model="tagsCotasJaPagas"
               :disabled="cotaJaPagasDisable"
               placeholder=""
               @input="changeTagTest()"
               inputType="number"

               no-add-on-enter
               disableAddButton
               >
  </b-form-tags>
  <b-form-checkbox switch size="lg" v-model="cotaJaPagasDisable">
    <span v-if="cotaJaPagasDisable">Unlock</span>
    <span v-else>Lock</span>

  </b-form-checkbox>
  
   
  
  
</div>

CSS

body { padding: 1rem; }

JavaScript

new Vue({
  el: '#app',
  data: {
    
    tagsCotasJaPagas : ['2016', '2017'],
    cotaJaPagasDisable : true,
    
    
    tagsCotasAbertas : ['2018', '2019', '2020']
    
    
    
  },
})