JSFiddle - React, Tailwind, and code Playground

by SUNG BIN CHO

HTML

<div id="app">
  <article>
    They call me fruit.<br>
    They call me fish.<br>
    They call me insect.<br>
    But actually I'm not one of those.
    <div id="solution" @click="showSolution = true">
      I am a <transition name="fade"><span id="dragon" v-show="showSolution">Dragon</span></transition>
    </div>
  </article>
</div>

CSS

#solution{
  cursor: pointer;
}
.fade-enter{
  opacity: 0
}
.fade-enter-active{
  transition: opacity .5s;
}

JavaScript

new Vue({
	el:'#app',
	data: {
  	showSolution: false
  }
  
  /* 
  computed: {
    classes(){
      const longText = this.limit - this.memeText.length <= 10
      return { warn: true}
    }
  } */
})