JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">

  <div class="mode">
    <label>
      <input v-model="demo" type="radio" value="A"> A
    </label>
    <label>
      <input v-model="demo" type="radio" value="B"> B
    </label>
    <label>
      <input v-model="demo" type="radio" value="C"> C
    </label>
  </div>

  <transition-group name="fade" mode="out-in">
    <div v-if="demo === 'A'" key="block-a" class="block">A Block</div>
    <div v-if="demo === 'B'" key="block-b" class="block">B Block</div>
    <div v-if="demo === 'C'" key="block-c" class="block">C Block</div>
  </transition-group>
</div>

SCSS

#app {
  position: relative;
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

button {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.block {
  display: block;
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #0f0;
}

.mode {
  margin-bottom: 1rem;
  label { margin-right: 1rem; }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
	    demo: 'A',
      isShow: true
    }
  }
});

app.mount('#app');