JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue-blocks@0.3.2/dist/vue-blocks.js"></script>
<h1>Vue blocks demo</h1>
  
  <!-- app mount point -->
  <app></app>

<template component="app">
  <my-component></my-component>
</template>

<template component="my-component">
  <div>
    My component.<br>
    My variable: <span class="var">{{variable}}</span><br>

    Another component:<br>
    <another-component :value="variable"> </another-component>
  </div>
  <style scoped>
    span{ color: green; font-weight: bold; }
  </style>
  <script>
    export default {
      data(){ 
        return {
          variable: 'my value'
        }
      }
    }
  </script>
</template>

<template component="another-component" props="value">
   <div>
     Another component with value {{value}}
   </div>
</template>