like/heart animation. see it live here https://play.tailwindcss.com/x9sf8kkuqy

like.html

<div class="grid min-h-screen min-w-full place-items-center">
  <div class="relative grid place-items-center">
    <input type="checkbox" id="liked" class="peer appearance-none text-4xl text-gray-400 duration-200 before:content-['🤍'] checked:text-red-500 checked:before:content-['❤'] active:scale-75" />
    <p class="absolute -bottom-full w-max opacity-0 duration-200 peer-checked:opacity-100">This button does nothing</p>
    <label for="liked" class="absolute aspect-square origin-center rounded-full border-fuchsia-400 peer-checked:animate-bubble-expand" />
  </div>
</div>

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "bubble-expand": "bubble-expand 0.7s cubic-bezier(0.33, 1, 0.68, 1)",
      },
      keyframes: {
        "bubble-expand": {
          "0%": {
            "width": "2rem",
            "border-width": "2rem", 
            "opacity": "1"
          },
          "70%": {
            "opacity": "1"
          },
          "100%": {
            "width": "10rem",
            "border-width": "0",
            "opacity": "0"
          },
        }
      }
    },
  },
  plugins: [],
}