JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="app">
        <!--  <p v-if="show">hello</p>
        <p v-else="show">hi</p>
        <template v-if="show">
            <h1> Kiran </h1>
        </template> 

        <button @click="show=!show">swich</button>
       <hr> -->
        
         <textarea v-model="message"  class="expand" v-bind:class="{ active: isActive }" @click="activeLink"> </textarea>
          <br>
    <button  v-show="message" class="btn">Send Message</button>
         
        <div>

        </div>
        <br><br>
        
        <!--

         <button  @click="activeLink"> swich</button>
         <button  @click="activeLink"> swich</button> -->
         



    </div>

CSS

.expand {
  height: 4em;    
  width: 50%;   
  padding: 3px;    
  transition: 0.5s;   
  transition: background-color 1s;
  border-radius: 4px; 
  border: 1px solid #e5e6e7;
}

.active  {
   height: 8em;    
  width: 50%;   
  padding: 3px;    
  transition: 0.5s;   
  transition: background-color 1s;
  border-radius: 4px; 
  border: 1px solid #e5e6e7;
}

JavaScript

new Vue({
            el: '#app',
            data: {
                isActive: false,
                message: ''
              },
              methods: {
                activeLink() {
                  this.isActive = true
                }
              }
        });