JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<div class="flippable some-theme far">
  <div class="front">
    Front
  </div>
  <div class="back">
    Back
  </div>
</div>

<div class="flippable some-theme">
  <div class="front">
    Front
  </div>
  <div class="back">
    Back
  </div>
</div>

<div class="flippable some-theme close">
  <div class="front">
    Front
  </div>
  <div class="back">
    Back
  </div>
</div>

SCSS

.flippable {
    position: relative;
    
    perspective: 1000px;
    &.close {perspective: 500px;}
    &.far {perspective: 2000px;}
    
    .front,
    .back {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: 1s all;
        background-color: white;
    }
    .front {
        transform: rotateY(0deg) translateZ(1px);
        z-index: 10000;
    }
    .back {
        transform: rotateY(-180deg) translateZ(0px);
        z-index: 0;
    }
    &.flipped {
        .front {
            transform: rotateY(180deg) translateZ(0px);
            z-index: 0;
        }
        .back {
            transform: rotateY(0deg) translateZ(1px);
            z-index: 10000;
        }
    }
}

// Custom CSS
body {
  background-color: #ddeeff;
  padding: 10px;
}

.flippable.some-theme {
  display: inline-block;
  width: 200px;
  height: 100px;
  font-family: Arial;
  font-weight: bold;
  & + div {
    margin-left: 20px;
  }
  > div {
    line-height: 100px;
    text-align: center;
    border: solid 1px #ddd;
  }
}

JavaScript

Array.from(document.querySelectorAll('.flippable'))
  .forEach(function(element) {
    element.addEventListener('click', function() {
      this.classList.toggle('flipped');
    });
  });