JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <multi-split-pane split="horizontal" height="400px" width="1000px" resizerWidth="30px" classes="v-pane-custom">
    <Pane>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </multi-split-pane>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-multi-split-pane@1.1.1/dist/vue-multi-split-pane.min.js"></script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

body {
  font-family: 'Fira Code', monospace;
  background: #d8d1d9;
}

.v-pane-custom .v-pane .content {
  background: #fff;
}

.v-pane-custom .content .innerContent {
  padding: 20px;
  line-height: 1.5;
}

      .paneNested>.content>.innerContent {
        padding: 0;
      }

JavaScript

Vue.component('MultiSplitPane', VueMultiSplitPane.MultiSplitPane)
Vue.component('Pane', VueMultiSplitPane.Pane)

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