JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div id="app">
  <div class="card m-5">
    <div class="card-body">
      <div class="card-title">This is the title</div>
      <div class="card-text">Something</div>
    </div>
  </div>
  <p class="p-3 bg-primary text-white">{{ greeting }}</p>
  <hr>
  <strong class="h4">{{ name }}</strong>
  <button @click="changeName" class="btn btn-danger">Change name</button>
  <hr>
  <div v-for="line in output" key="line">{{ line }}</div>
</div>

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	greeting: 'Welcome to rock paper scisiorsd',
    	name: 'Alligator',
      output: []
    };
  },
  mounted() {
   setTimeout(() => {
   	this.name = 'Saad';
   }, 3000);
   let x = 1;
  },
  methods: {
  	changeName() {
    	this.name = 'Something';
    }
  }
});