JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/mode/javascript/javascript.min.js"></script>
<div id="ddd">
<p>
    <button @click="addComponent('component-1')">Add Component 1</button>
    <button @click="addComponent('component-2')">Add Component 2</button>
    <button @click="addComponent('component-3')">Add Component 3</button>
</p>
<component v-for="view in views" :is="view" track-by="$index"></component>
sdf
</div>

CSS

.c1,
.c2,
.c3 {
    display: inline-block;
    border: 2px orange solid;
    padding: 20px;
    text-align: center;
    float: left;
    margin: 5px;
}
.c1 {
    color: orange;
    border-color: orange;
}
.c2 {
    color: #4679bd;
    border-color: #4679bd;
}
.c3 {
    color: #4DA24B;
    border-color: #4DA24B;
}

JavaScript

Vue.component('component-1', {
    template: '<p class="c1">Component 1!</p>'
});
Vue.component('component-2', {
    template: '<p class="c2">Component 2!</p>'
});
Vue.component('component-3', {
    template: '<p class="c3">Component 3!</p>'
});

new Vue({
    el: '#ddd',
    data: {
        views: ['component-1', 'component-2', 'component-3']
    },
    methods: {
        addComponent: function (component) {
            this.views.push(component);
        }
    }
});