JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <child class="red" :class="'bold'">Hello</child>
  <functional-component class="red" :class="'bold'"></functional-component>
</div>

CSS

.child{
  background:yellow;
}
.red{
  color:red;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style:italic;
}

JavaScript

new Vue({
	el:'#vue',
  components:{
  	child:{
    	template:`<div class="child" :class="{italic:true}"><slot></slot></div>`
    },
    functionalComponent:{
    	functional:true,
      render(el, ctx){
      	console.log(ctx)
      	return el('div','functional component')
      }
    }
  }
})