JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="myApp">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div :class="{ 'flip-card-front':true, 'flipped':!isFlipped }">Side A</div>
      <div :class="{ 'flip-card-back':true, 'flipped':isFlipped }">Side B</div>
    </div>
  </div>

  <button @click="onButtonClick">Flip</button>
</div>

CSS

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotateY(180deg);
  
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

JavaScript

const MyApp = {
  data() {
    return {
      isFlipped: false
    }
  },
  
  methods: {
    onButtonClick() {
      this.isFlipped = true;
    }
  }
}

Vue.createApp(MyApp).mount('#myApp');