JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="row whole-shop-container shop-body show-products prod-content clearfix card-container">
  <div class="col-lg-6 col-md-6 col-sm-6 product-item">
      <div class="card card-flip h-100">
          <div class="card-front">
              <div class="card-body">
                  <div class="details shop-list-container">
                      <div class="shop-list">
                          <div class="shop-container">
                              <p>An image will be here</p>
                          </div>
                          <h4>Product Name 1</h4>
                          <button class="btn btn-outline-secondary">View Details</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="card-back bg-white">
              <div class="card-body">
                  <div class="product-detail-inner">
                      <h3 class="products-text product-name"><span>Product Name 1</span></h3>
                      <p class="products-text product-price">Product price: <span>$200</span></p>
                      <p class="products-text stock">Is there stock? <span>Yes, there are 4 left</span></p>
                      <p class="products-text product-description">Product Description: <span>Product 1 description</span></p>
                      <button class="addToCart btn btn-outline-secondary">Add to cart</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6...

CSS

.card {
	background-color: transparent;
	border: 0;
  height:300px
}

/*
flip card
*/
.card-flip > div {
	backface-visibility: hidden;
	transition: transform 600ms;
	transition-timing-function: ease-out;
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
}
  
.card-front {
	transform: rotateY(0deg);
}

.card-back {
	transform: rotateY(180deg);
	position: absolute;
	top: 0;
}

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

/* hover works but I don't want hover */
/* .card-flip:hover .card-front {
  transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
  transform: rotateY(0deg);
} */

JavaScript

const card = document.querySelectorAll('.card');
const front = document.querySelectorAll('.card-flip .card-front');
const back = document.querySelectorAll('.card-flip .card-back');
const cardContainer = document.querySelectorAll('.card-container');

for (let i = 0; i < card.length; i++) {
    card[i].addEventListener('click', function() {
        $('.card').removeClass('flipped');
        if (back[i].classList.contains('flipped')) {
            back[i].classList.remove('flipped');
            front[i].style.transform = "rotateY(0deg)";
        } else {
            back[i].classList.add('flipped');
            front[i].style.transform = "rotateY(-180deg)";

        }
    });
}