JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<main></main>

<script id="tabs" type="text/ractive">
		<div class="ui {{titleClasses.join(' ')}} menu">
	{{#tabs:i}}
	<div class="{{#active}}active{{/active}} item" on-click="boom:{{i}}"><i class="{{icon}} icon"></i>{{title}}</div>
	{{/tabs}}
</div>
{{#tabs:i}}
<div class="ui {{detailClasses.join(' ')}} {{#active}}active{{/active}} tab">
	{{>cont}}
</div>
{{/tabs}}
   
</script>

<script id="sidebar" type="text/ractive">
    <select value='{{perspective}}'>
    {{#persp}}
        <option value='{{.}}'>{{.}}</option>
    {{/persp}}
</select>
  
  <dynamic/>
</script>

JavaScript

var Tabs = Ractive.extend({
	template: '#tabs'
  ,oninit () {
  	var self = this;
    
    self.on('boom', function(_,i){
    	var keyPath = 'tabs.'+i+'.active'
      self.set('tabs.*.active', false);
    	self.set(keyPath, !self.get(keyPath) )
    })
  }
})

var DynamicComponent = Ractive.extend({
    template: '<component/>',
    components: {
        component: function() {
        		console.log('name', this.get('perspective'))
            return this.get('perspective')
        }
    },
    oninit: function(){
    	
        this.observe('perspective', function(){
           this.reset();
        }, { init: false});
    }
});

var V1 = Ractive.extend({
	template: '<div>This is V1</div>'
})
var V2 = Ractive.extend({
	template: '<div>This is V2</div>'
})
var V3 = Ractive.extend({
	template: '<div>This is V3</div>'
})

var P2 = Ractive.extend({
	template: '<Tabs titleClasses="{{[\'secondary\', \'pointing\']}}" detailClasses="{{[\'attached\']}}" tabs="{{tabs}}"/>'
  ,components: {
  	Tabs
    ,V2
    ,V3
  }
  ,partials: {
  	v2: '<V2/>'
    ,v3: '<V3/>'
  }
  ,data() {
  
  	return {
    	tabs: [
    	{
        	title: 'V2'
          ,cont: 'v2'
          ,active: true
          
     }
        ,{
        	title: 'V3'
          ,cont: 'v3'
          ,active: false
          
        }
    ]
    }
  	
  }
})

var P1 = Ractive.extend({
	template: '<Tabs titleClasses="{{[\'secondary\', \'pointing\']}}" detailClasses="{{[\'attached\']}}" tabs="{{tabs}}"/>'
  ,components: {
  	Tabs
    ,V1
    ,V2
  }
  ,partials: {
  	v1: '<V1/>'
    ,v2: '<V2/>'
  }
  ,data() {
  
  	return {
    	tabs: [
    	{
        	title: 'V1'
          ,cont: 'v1'
          ,active: true
          
     }
        ,{
        	title: 'V2'
          ,cont: 'v2'
          ,active: false
          
        }
    ]
    }
  	
  }
})

var config = {
	P1: P1
  ,P2: P2
} 

var Sidebar = Ractive.extend({
	template: '#sidebar'
  ,components: {
  dummy: Ractive.extend({ template: 'Welcome message' }),
 ...