JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class='card' tabindex='1'>
    <div class='front'>
    </div>
    <div class='back'>
    </div>
</div>

<div class='card' tabindex='1'>
    <div class='front'>
    </div>
    <div class='back'>
    </div>
</div>

<div class='card' tabindex='1'>
    <div class='front'>
    </div>
    <div class='back'>
    </div>
</div>

CSS

.card {
    height: 50px;
    width: 50px;
    position: relative;
    display: inline-block;
    margin: 10px;
    
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.3s ease;
}

.card:focus {
    -webkit-transform: rotateY(180deg);
}

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

}

.front {
    background-color: red;
}

.back {
    background-color: blue;
    -webkit-transform: rotateY(180deg);

}

JavaScript

$(function() {
  var $cards = $('.card');
  var cardInFocus = null;


  $cards.each(function(index, elem) {
    var $elem = $(elem);
    var pos = $elem.position();
    $(elem).data('orig-x', pos.left);
    $(elem).data('orig-y', pos.top);
  });

  var reset = function() {
    if (cardInFocus) {
      $(cardInFocus).transition({
        x: 0,
        y: 0
      });
    }
  };

  $cards.on('focus', function(e) {
    reset();
    cardInFocus = this;
    var $doc = $(document);
    var centerX = $doc.width() / 2;
    var centerY = $doc.height() / 2;
    var $card = $(this);
    var origX = $card.data('orig-x');
    var origY = $card.data('orig-y');
    $(this).transition({
      x: centerX - origX,
      y: centerY - origY
    });
  });

  $cards.on('blur', function(e) {
    reset();
  });

});