JSFiddle - React, Tailwind, and code Playground

by Yomi Eluwande

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <organogram>
    <template scope="props">
      <div v-if="props.type === 'boss'">
        <figure>
          <img src="http://lorempixel.com/210/210/cats/1"/>
          <figcaption>Sylvester</figcaption>
        </figure>
      </div>
      <div v-else-if="props.type === 'employee'"
           :class="'r' + props.rank">
        <cat :name="catName"></cat>
      </div>
    </template>
  </organogram>
</div>

CSS

.r1 {
  font-size: 1.5em;
  color: red;
}
.r2 {
  font-size: 1.2em;
  color: blue;
}

Babel + JSX

Vue.component('framed', {
  template: `<div class="frame">
               <h3>Russian cat mafia employee of the month</h3>
               <slot>Nothing framed.</slot>
             </div>`
})

Vue.component('cat', {
  template: `<div>
               <figure>
       <img :src="'http://lorempixel.com/220/220/cats/?' + name"/>
                 <figcaption>{{name}}</figcaption>
               </figure>
             </div>`,
  props: ['name']
})


Vue.component('organogram', {
  template: `<div class="organogram">
               <h3>Scratchy co.</h3>
               <div class="boss">
                 <h3>Boss</h3>
                 <slot type="boss">No boss</slot>
               </div>
               <div class="employee" v-for="rank in 2">
                 <h3>Employee</h3>
                 <slot type="employee" 
                       :rank="rank">No employee</slot>
               </div>
             </div>`
})

new Vue({
  el: '#app',
  data: {
    names: ['Murzik', 'Pushok', 'Barsik', 'Vaska', 'Matroskin']
  },
  computed: {
    catName () {
      return this.names[Math.floor(Math.random() * 
        this.names.length)]
    }
  }
})