JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<title>Vue.js Toggle (Show/Hide) DOM Element Demo</title>

<body>

<div id="app">
  <div v-on:click="isShow = !isShow" class="content">
 click
  

  </div>
  
  
  <div v-show="isShow" class="bg-color" >
 <input type="text" placeholder="Suject" Style="font-size:24px"> <br>
 <textarea placeholder="start a conversation"></textarea>
  
  </div>
  
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      isShow: false,
      ishide:true
    }
  })
</script>
</body>

CSS

input[type=text] {
     width:404px;
     height:50px;
      border:none;
      outline:none;
   }
   
   textarea {
     width:400px;
     height:50px;
   border:none;
   outline:none;
   }
   
   .bg-color1 {
     background-color:#eee;
         width:100%;
     height:100%;
     border: 2px solid #008080;
     border:none
   }