JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <div class="elm green" :style="{transform:'translate('+x+'px, '+y+'px)'}">
    <b>"translate('+x+'px, '+y+'px)"</b><br>
    {{'translate('+x+'px, '+y+'px)'}}
  </div>
  <div class="elm blue" :style="{transform:`translate(${x}px, ${y}px)`}">
    <b>`translate(${x}px, ${y}px)`</b><br>
    {{`translate(${x}px, ${y}px)`}}
  </div>
  <div class="ctrl">
    <p>Vue.js v{{version}}</p>
    x = <input autofocus type="number" v-model="x" /><br>
    y = <input type="number" v-model="y" />
  </div>
</div>

SCSS

html {
  font-family: monospace;
  font-size: 20px;
}

.elm {
  position: absolute;
  padding: 0 10px;
  left: 10px;
}

.green {
  top: 100px;
  background-color: #cfc;
}

.blue {
  top: 200px;
  background-color: #ccf;
}

.ctrl {
  margin: 30px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    x: 50,
    y: 50,
    version: Vue.version
  }
});