JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #f3f6f9;
}

.thumb {
  position: relative;
  border: 1px solid #c0c5ca;
  margin: 20px auto;
  border-radius: 5px;
  font-size: 25px;
  font-family: sans-serif;
  padding: 0 20px;
  width: 400px;
  box-sizing: border-box;
  overflow: hidden;
  background: white;
}

.thumb h3 {
  line-height: 70px;
  font-weight: initial;
}

.thumb img {
  left: -21px;
  position: relative;
}

.thumb .count {
  display: block;
  margin: 10px 0;
  font-size: 15px;
}

.thumb .button {
  display: block;
  margin: 10px;
  font-size: 15px;
  padding: 10px;
  position: relative;
  left: -20px;
  width: 180px;
  border-radius: 5px;
  text-align: center;
}

.button:hover {
  background: #f3f6f9;
}

.pop {
  position: absolute;
  bottom: 20px;
  border: 1px solid #c0c5ca;
  display: block;
  width: 100px;
  height: 45px;
  padding: 7px;
  border-radius: 40px;
  background: white;
  transition: all 0.1s ease-in-out;
  opacity: 0;
  /*transition-delay: 1s;*/
}

.pop.act {
  bottom: 40px;
  opacity: 1;
  cursor: pointer;
  /*transition-delay: 0s;*/
}

.can {
  bottom: 0px;
  position: relative;
  background: rgb(249, 0, 83);
  background-image: radial-gradient(circle, rgb(255, 143, 180) 0%, rgb(249, 0, 83) 40%, rgb(189, 0, 63) 95%);
  background-position: 0px -3px;
  border-radius: 100%;
  transition: all 0.1s ease-in-out;
}

.can:hover {
  transform: scale(1.2);
  bottom: 5px;
}

.like {
  left: 0 !important;
  background-image: radial-gradient(circle, rgb(143, 188, 255) 0%, rgb(0, 134, 249) 40%, rgb(0, 114, 189) 95%);
  border-radius: 100%;
  margin-left: 10px;
  bottom: 0px;
  display: inline-block;
  width: 45px;
  height: 45px;
  position: relative;
  transition: all 0.1s ease-in-out;
}

.like:hover {
  transform: scale(1.2);
  bottom: 5px;
}

JavaScript

var imghrt = new Image();
imghrt.src = "https://i.imgur.com/x4BIMvS.png";

var hrts = 45,
  ctx, ani;

var posts = [{
    msg: "Hola Mundo!",
    img: 'https://picsum.photos/seed/1/400/300/?blur',
    hrt: 2,
    ihrt: false
  },
  {
    msg: "Subscribete!",
    img: 'https://picsum.photos/seed/3/400/300/?blur',
    hrt: 2,
    ihrt: false
  }
]

posts.forEach((p) => addPost(p));

function addPost(p) {
  let thumb = document.createElement('div');
  thumb.className = "thumb";

  let msg = document.createElement('h3');
  msg.innerText = p.msg;

  let img = document.createElement('img');
  img.src = p.img;

  let hrtCount = document.createElement('div');
  hrtCount.innerText = p.hrt;
  hrtCount.className = "count";

  let hrtButton = document.createElement('div');
  hrtButton.innerText = 'Me gusta';
  hrtButton.className = "button";

  let pop = document.createElement('div');
  pop.className = "pop";

  let can = document.createElement('canvas');
  can.className = 'can';
  can.width = hrts;
  can.height = hrts;
  can.getContext('2d').drawImage(imghrt, 7.5, 9.5, 30, 30);

  let likplace = document.createElement('div');
  likplace.className = 'like';

  can.onclick = function() {
    if (!p.ihrt) {
      p.hrt++;
      p.ihrt = !p.ihrt;
    } else {
      p.hrt--;
      p.ihrt = !p.ihrt;
    }

    hrtCount.innerText = p.hrt;
    
    //ctx.resetTransform();
    pop.className = 'pop';
  }
  
  let inButton = false;
  
  hrtButton.onmouseenter = function() {
    pop.className = 'pop act';
    inButton = true;
  }

  hrtButton.onmouseleave = function() {
  	inButton = false;
    setTimeout(() => {
    	if(!inButton){
      	pop.className = 'pop';
      }
    }, 1100);
  }

  thumb.onmouseenter = function() {
  if (ctx != can.getContext("2d")) {
  	cancelAnimationFrame(ani);
  	ani = requestAnimationFrame(animation);
    ctx = can.getContext("2d");
    inThumb = true;
    }
  }

  pop.appendChild(can);
  pop.appendChild(likplace);

  hrtButton.appendChild(pop);

 ...