JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>

<div id="app">
  <p v-for="m in messages" :style="{
  'font-size': m.n + 'px', 
  'color': 'hsl(' + m.c + ', 50%, 50%)',
  'position': 'absolute',
  'top': m.y + 'px',
  'left': m.x + 'px'
  }">{{m.t}}</p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {messages: [{t: '<3 ROYA <3', n:0, c:0}]},
  mounted: function() {
  	setInterval(() => {
    	this.messages.push({
      	t: this.messages[0].t,
      	n: Math.floor(Math.random() * 64),
      	c: Math.floor(Math.random() * 360),
        y: Math.floor(Math.random() * 360),
        x: Math.floor(Math.random() * 360),
      })
    }, 1000)
  }
})