JSFiddle - React, Tailwind, and code Playground

by gol ngaz²

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="bootstrap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
  <button @click="displayTest()">Toggle Test</button>
  <Test v-if="displayedTest"></Test>
</div>


<div class="template el-Test">
  <span :style="testStyle">Hello world!</span>
  <textarea v-model="testStyle"></textarea>
  <span>{{testStyle}}</span>
</div>

CSS

.template {
  display:none;
}

.template-debug {
  display : block;
  color: red;
}

.el-v {
  display:inline;
}

.v-Test {
  color:blue;
}

JavaScript

util = u = {
   de : function(arg, defaultValue) {
    if (arg === undefined) {
      arg = defaultValue;
    }

    return arg;
  },

  el: function(name, data, debug) {
    data = this.de(data, {});
    if (data.template) {
      return data;
    }

    var myTemplate = $('.template.el-' + name);

    debug = this.de(debug, false);
    var debugClass = '';
    var theHtml = myTemplate.html();
    if (debug) {
      debugClass = ' .template-debug';
      myTemplate.addClass('template-debug');
    } else {
    	myTemplate.remove();
    }
    data.template = '<div class="el-v v-' + name + '">' + theHtml + '</div>';

    return data;
  }
}

Test = util.el('Test', {
	data: function (){
    return {
      testStyle: 
     		'color:yellow;' +
        'background-color:green;' +
        'display:inline-block;' +
        'height:200px;' +
        'width:200px;' +
        'margin:80px;' +
        'box-shadow:10px 10px 10px 1px grey;' +
        'border-radius:10px;' +
        'padding:10px;' +
        'text-align:center;'
      }
  }
});

console.log(Test);

vue = new Vue ({
	el: "#app",
  components: {
  	Test: Test
  },
  data : function () {
  	return {
    	displayedTest: false
    }
  },
  
  methods: {
  	displayTest: function () {
    	this.displayedTest = !this.displayedTest;
    }
  }
});