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> -->
       
         <div class="form-group Bg-wall-textarea top-header-margin">
        <textarea class="expand" v-bind:class="{ active: isActive }" @blur="activeLink" @click="activeLink" placeholder="Start a Topic"></textarea>
        
 
        <div class="btn-post-box display-hidden"  v-bind:class="{ active1: isActive }" >
               <a href="#">
                <button class="btn btn-primary btn-attach" name="Post"> Post</button>
                <span class="txt-post1"> 4 people will be notified </span>
            </a>
        </div> 
    </div>
    
        
         
         
        <div>

        </div>
        <br><br>
        
    
         



    </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;
}

.Bg-wall-textarea {
  min-height: 40px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 5px solid #008080;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.btn-post-box {
  width: 100%;
  min-height: 40px;
  padding: 0; 
  background-color: #ffffff;
  border-radius: 4px solid #008080;
}

.display-hidden {
  display: none;
}

.active1  {
  transition: 0.5s;   
  transition: background-color 1s;
  
}

.display-hidden.active1 {
  display: block;
}

JavaScript

new Vue({
            el: '#app',
            data: {
                isActive: false
               
              },
              methods: {
                activeLink() {
                  this.isActive = !this.isActive;
                },
                m() {
                	console.log('ssssssssssss');
                }
              }
        });