JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<div class='container'>
  <span class='content'>The content</span>
  <span class='info'>The info</span>
</div>

CSS

html,
body {
  background: lime;
}

.container {
  width: 150px;
  height: 150px;
  background: white;
  border: 5px solid white;
}

.content {
  display: block;
}

.info {
  display: none;
}

.display {
  display: block;
}

.hide {
  display: none;
}

.card_active {
  transform: rotateY(180deg);
  transition: .7s ease-in-out;
  background: black;
}

JavaScript

var d = function() {
	console.log("here");
	 $('.info').toggleClass('display');
    $('.container').removeClass('card_active');
};


$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active').delay(7000).queue(d);
});


 
/*  $('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  setTimeout(function() {
    $('.info').toggleClass('display');
    $('.container').toggleClass('card_active');
  }, 700);
});*/