JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-row :gutter="10">
    <el-col :sm="{span:20, offset:2}"
            :md="{span:6, offset:0}"><div class="grid-content bg-purple"></div></el-col>
    <el-col :sm="{span:20,offset:2}"
            :md="{span:6,offset:0}"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

Babel + JSX

new Vue().$mount('#app')