JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<div class="heart"></div>

CSS

.heart {
  background-color: red;
  height: 60px;
  /*dimension of the square*/
  position: relative;
  top: 40px;
  /*position from top*/
  transform: rotate(-45deg);
  /*negative = counter clockwise, put 0 to try*/
  width: 60px;
  /*dimension of the square*/
  transition: all 1s ease;
  /*length of animation*/
}

.heart::before,
.heart::after {
  content: "";
  /*kosong, for it to exist*/
  background-color: blue;
  border-radius: 50%;
  /*perfect round curve*/
  height: 60px;
  /*dimension of the shape*/
  position: absolute;
  width: 60px;
  /*dimension of the shape*/
  transition: all 1s ease;
  /*length of animation*/
}

.heart:before {
  top: -50px;
  /*position of the left shape*/
  left: 0;
  /*remember rotated ACW 45deg*/
}

.heart:after {
  left: 30px;
  /*position of the right shape*/
  top: 0px;
  /*remember rotated ACW 45deg*/
}

.heart {
  opacity: 0.3;
  /*original state*/
}

.heart:hover {
  opacity: 1;
  /*hover state*/
}

.heart:active {
  opacity: 1;
  /*hover state*/
  background: black;
}

.heart:active::before,
.heart:active::after {
  background: black;
}