JSFiddle - React, Tailwind, and code Playground

by AldoRomo88

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
  <transition-group name="fade" class="wrapper" tag="div">
    <div v-if="switc" key="dynamic" style="background-color: pink; padding: 20px; margin-bottom: 20px;">
      <p>
        Text that could be of any length because it comes from a database.
      </p>
      <textarea style="resize: vertical;">
        Textarea that the user can resize
      </textarea>
    </div>
    <button key="main-content" type="button" class="btn btn-secondary" style="width:100%" @click="switc = !switc">
      <span>Switch</span>
    </button>
  </transition-group>
</div>

SCSS

.wrapper {
  display: flex;
  flex-direction: column;
  >* {
    transition: all 0.5s;
    width:100%;
  };
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-leave-active {
  position: absolute;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    switc: false
  }
})