JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<app>
<expand-collapse>
    <expand-pane>
        <expand-title>Title</expand-title>
        <expand-content><p>D Lorem ipsum</p></expand-content>
    </expand-pane>
    <expand-pane>
        <expand-title>Title</expand-title>
        <expand-content><p>D Lorem ipsum</p></expand-content>
    </expand-pane>
</expand-collapse>
</app>

JavaScript

new Vue({
	el: 'app',
	components: {    
        expandCollapse: {
        	template: '<div class="expcol-group expcol-large" v-expcol data-speed="300"><content></content></div>'
        },
        expandPane: {
        	template: '<div class="expcol"><content></content></div>'
        }
    	expandTitle: {
    		template: '<a class="expcol-handle" href="#"><content></content></a>'
    	},
    	expandContent: {
        	template: '<div class="expcol-content"><content></content></div>'
        }
    }
});