JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app"></div>

CSS

.colour {
  width: 20px;
  height: 20px;
  float: left;
}

.red .colour {
  background: red;
}
.blue .colour {
  background: blue;
}
.green .colour {
  background: green;
}
.yellow .colour {
  background: yellow;
}

.label {
    float: left;
}

li {
  clear: both;
  list-style: none;
  padding: 1em;
}

Babel + JSX

const Menu = {
	template: `
  	<ul>
    	<li v-for="item in options" :class="item.colour">
      	<slot colour></slot>
      	<span class="label">{{item.name}}</span>
      </li>
    </ul>
  `,
  data: () => {
      return {
        options: [
          { name: 'one', colour: 'red' },
          { name: 'two', colour: 'green' },
          { name: 'three', colour: 'blue' },
          { name: 'four', colour: 'yellow' }
        ]
      };
 	}
};


const app = new Vue({
  components: {
  	custommenu: Menu,
  },
	template: `
  	<custommenu>
      <template scope="colour">
        <span class="colour"></span>
        <p> this is more here </p> 
      </template>
    </custommenu>
  `,
  methods: {
  	
  },
});

app.$mount('#app');