JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<div id="app">
  <div class="wrapper" v-on:click="changeFirstname">
    <p>{{ displayName }}</p>
    <button v-on:click="changeName">Change Name</button>
  </div>
</div>

SCSS

// http://www.galerie-imagine.fr/images/image-de-nature_1.jpg
body{
  position: relative;
  background-image: url('http://www.galerie-imagine.fr/images/image-de-nature_1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index:0;
  
  &::after {
    content: '';
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    
    
  }
  
}

JavaScript

new Vue({
  el: '#app',
  data: {
  	name: '',
    firstname: ''
  },
  computed: {
  	displayName() {
     return `${this.name} ${this.firstname}`
    }
  },
  methods: {
  	changeName() {
    	this.name = 'Forget'
    },
    changeFirstname() {
    	this.firstname = "Augustin"
    }
  },
  mounted () {
  	this.name = 'Jean'
    this.firstname = 'Dupont'
  }
})